@blerp/design 1.0.18 → 1.0.19

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.
Files changed (4) hide show
  1. package/package.json +47 -47
  2. package/dist/index.cjs.js +0 -4468
  3. package/dist/index.esm.js +0 -4339
  4. package/dist/index.umd.js +0 -4430
package/dist/index.cjs.js DELETED
@@ -1,4468 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var material = require('@mui/material');
6
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
8
- var iconsMaterial = require('@mui/icons-material');
9
- var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
10
- var BookmarkRemoveOutlinedIcon = require('@mui/icons-material/BookmarkRemoveOutlined');
11
- var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
12
- var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
13
- var PropTypes = require('prop-types');
14
- var React = require('react');
15
- var reactColorExtractor = require('react-color-extractor');
16
- var styled = require('styled-components');
17
- var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
18
- var reactPalette = require('react-palette');
19
- var _typeof = require('@babel/runtime/helpers/typeof');
20
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
21
- var KeyboardArrowDownRoundedIcon = require('@mui/icons-material/KeyboardArrowDownRounded');
22
- var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
23
- var _regeneratorRuntime = require('@babel/runtime/regenerator');
24
- var DeleteIcon = require('@mui/icons-material/Delete');
25
- var FileUploadRoundedIcon = require('@mui/icons-material/FileUploadRounded');
26
- var _extends = require('@babel/runtime/helpers/extends');
27
- var AvatarEditor = require('react-avatar-editor');
28
- var Dropzone = require('react-dropzone');
29
- var InsertPhotoRoundedIcon = require('@mui/icons-material/InsertPhotoRounded');
30
- var styles = require('@mui/material/styles');
31
- var AddRoundedIcon = require('@mui/icons-material/AddRounded');
32
- var FacebookIcon = require('@mui/icons-material/Facebook');
33
- var InstagramIcon = require('@mui/icons-material/Instagram');
34
- var ModeEditRoundedIcon = require('@mui/icons-material/ModeEditRounded');
35
- var PersonAddRoundedIcon = require('@mui/icons-material/PersonAddRounded');
36
- var PinterestIcon = require('@mui/icons-material/Pinterest');
37
- var TwitterIcon = require('@mui/icons-material/Twitter');
38
- var YouTubeIcon = require('@mui/icons-material/YouTube');
39
- var PersonRemoveRoundedIcon = require('@mui/icons-material/PersonRemoveRounded');
40
- require('@mui/icons-material/FilterAltRounded');
41
- var MenuRoundedIcon = require('@mui/icons-material/MenuRounded');
42
- var ViewModuleRoundedIcon = require('@mui/icons-material/ViewModuleRounded');
43
- require('@mui/icons-material/SettingsRounded');
44
- var SortRoundedIcon = require('@mui/icons-material/SortRounded');
45
- var ChevronRightRoundedIcon = require('@mui/icons-material/ChevronRightRounded');
46
- var PersonRoundedIcon = require('@mui/icons-material/PersonRounded');
47
- var SearchRoundedIcon = require('@mui/icons-material/SearchRounded');
48
-
49
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
50
-
51
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
52
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
53
- var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
54
- var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
55
- var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
56
- var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
57
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
58
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
59
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
60
- var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
61
- var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
62
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
63
- var KeyboardArrowDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownRoundedIcon);
64
- var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
65
- var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
66
- var DeleteIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteIcon);
67
- var FileUploadRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(FileUploadRoundedIcon);
68
- var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
69
- var AvatarEditor__default = /*#__PURE__*/_interopDefaultLegacy(AvatarEditor);
70
- var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
71
- var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertPhotoRoundedIcon);
72
- var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
73
- var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
74
- var InstagramIcon__default = /*#__PURE__*/_interopDefaultLegacy(InstagramIcon);
75
- var ModeEditRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ModeEditRoundedIcon);
76
- var PersonAddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonAddRoundedIcon);
77
- var PinterestIcon__default = /*#__PURE__*/_interopDefaultLegacy(PinterestIcon);
78
- var TwitterIcon__default = /*#__PURE__*/_interopDefaultLegacy(TwitterIcon);
79
- var YouTubeIcon__default = /*#__PURE__*/_interopDefaultLegacy(YouTubeIcon);
80
- var PersonRemoveRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRemoveRoundedIcon);
81
- var MenuRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuRoundedIcon);
82
- var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
83
- var SortRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortRoundedIcon);
84
- var ChevronRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightRoundedIcon);
85
- var PersonRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRoundedIcon);
86
- var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRoundedIcon);
87
-
88
- var PlayOutlineIcon = function PlayOutlineIcon(_ref) {
89
- var sx = _ref.sx;
90
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
91
- sx: sx
92
- }, /*#__PURE__*/React__default['default'].createElement("g", {
93
- xmlns: "http://www.w3.org/2000/svg",
94
- id: "Icon_awesome-play",
95
- transform: "translate(4 3.999)"
96
- }, /*#__PURE__*/React__default['default'].createElement("g", {
97
- id: "Subtraction_1006"
98
- }, /*#__PURE__*/React__default['default'].createElement("path", {
99
- d: "M3.9,1C3.3,1,2.6,1.4,2.6,2.2v11.6c0,1,1.3,1.6,2,1l8.1-5.6c0.8-0.5,0.8-1.8,0-2.3L4.7,1.2 C4.5,1,4.2,1,3.9,1 M3.7-1L3.7-1c0.6,0,1.2,0.2,1.7,0.5l0,0L14,5.6C14.7,6.1,15.2,7,15.2,8c0,1-0.5,1.9-1.2,2.5l-8.6,6 c-0.5,0.3-1,0.5-1.6,0.5c-0.7,0-1.4-0.3-2-0.7c-0.6-0.5-1-1.3-1-2.1V1.8c0-0.9,0.3-1.6,1-2.1C2.3-0.8,3-1,3.7-1z"
100
- }))));
101
- };
102
- var PlaySolidIcon = function PlaySolidIcon(_ref2) {
103
- var sx = _ref2.sx;
104
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
105
- sx: sx
106
- }, /*#__PURE__*/React__default['default'].createElement("g", {
107
- xmlns: "http://www.w3.org/2000/svg",
108
- id: "Icon_awesome-play_1_",
109
- class: "st5"
110
- }, /*#__PURE__*/React__default['default'].createElement("path", {
111
- class: "st3",
112
- d: "M7.2,4.3c-0.2,0-0.3,0-0.5,0.1C6.4,4.6,6.3,4.8,6.3,5.1v13.8c0,0.4,0.3,0.6,0.4,0.7c0.3,0.2,0.7,0.2,0.9,0 l9.6-6.7c0.2-0.2,0.4-0.4,0.4-0.7c0-0.3,0-0.6-0.2-0.8c-0.1-0.1-0.1-0.1-0.2-0.2L7.7,4.5C7.6,4.4,7.4,4.3,7.2,4.3z"
113
- })));
114
- };
115
- var TwitchBitIcon = function TwitchBitIcon(_ref3) {
116
- var sx = _ref3.sx;
117
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
118
- sx: sx
119
- }, /*#__PURE__*/React__default['default'].createElement("g", {
120
- xmlns: "http://www.w3.org/2000/svg",
121
- id: "Bits"
122
- }, /*#__PURE__*/React__default['default'].createElement("g", {
123
- id: "Path_3931"
124
- }, /*#__PURE__*/React__default['default'].createElement("path", {
125
- class: "st3",
126
- d: "M12,21c-0.2,0-0.3-0.1-0.5-0.2l-6.8-5.4c-0.3-0.2-0.4-0.6-0.2-1l6.8-11.2C11.6,3.1,11.8,3,12,3c0,0,0,0,0,0 c0.3,0,0.5,0.1,0.6,0.4l6.7,11.2c0.2,0.3,0.1,0.7-0.2,1l-6.7,5.4C12.4,20.9,12.2,21,12,21z M6.2,14.7l5.8,4.6l5.7-4.6L12,5.2 L6.2,14.7z"
127
- }))));
128
- };
129
- var BlerpCoinsIcon = function BlerpCoinsIcon(_ref4) {
130
- var sx = _ref4.sx;
131
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
132
- sx: sx
133
- }, /*#__PURE__*/React__default['default'].createElement("g", {
134
- xmlns: "http://www.w3.org/2000/svg",
135
- id: "Group_30665"
136
- }, /*#__PURE__*/React__default['default'].createElement("path", {
137
- id: "Subtraction_383",
138
- class: "st3",
139
- d: "M13.7,17.5c-4,0-7.3-3.3-7.3-7.3c0-4,3.3-7.3,7.3-7.3c4,0,7.3,3.3,7.3,7.3 C21,14.3,17.7,17.5,13.7,17.5z M12.7,6.5c-0.1,0-0.2,0-0.3,0.1c-0.5,0.2-0.7,0.7-0.8,1.2c0,0.2-0.1,0.4-0.2,0.5 c-0.2,0.3-0.5,0.5-0.9,0.6l0,0c-0.5,0.2-0.9,0.3-0.9,1c0,0.5,0.3,0.7,0.7,0.9c0.3,0.2,0.6,0.4,0.8,0.7c0.1,0.3,0.2,0.7,0,1.1 c-0.2,0.5-0.1,1,0.3,1.4c0.2,0.2,0.4,0.2,0.6,0.2c0.6-0.1,1.1-0.4,1.5-0.8c0.3-0.3,0.6-0.5,1-0.7c0.4-0.1,0.8-0.1,1.2-0.1h0.1 c0.9,0,1.7-0.1,1.9-0.9c0.1-0.7-0.3-1-0.7-1.3c-0.3-0.2-0.5-0.5-0.7-0.8c0-0.3,0-0.7,0.1-1c0.1-0.4,0.2-0.8-0.1-1.1 C16.4,7.1,16.2,7,15.9,7c-0.2,0-0.5,0.1-0.7,0.2h0c-0.2,0.1-0.5,0.2-0.7,0.2c-0.1,0-0.2,0-0.3-0.1C14,7.2,13.8,7.1,13.7,7l0,0 C13.4,6.7,13.1,6.5,12.7,6.5z M13.5,11.2c-0.5,0-1.1-0.3-1.4-0.7c-0.1-0.1-0.1-0.2,0-0.3c0-0.1,0.1-0.2,0.2-0.2 c0.4,0,0.8-0.1,1.2-0.3c0.4-0.1,0.8-0.3,1.1-0.6c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.2,0.2c0.1,0.7-0.3,1.4-1,1.7 C13.9,11.2,13.7,11.2,13.5,11.2L13.5,11.2z"
140
- }), /*#__PURE__*/React__default['default'].createElement("path", {
141
- id: "Subtraction_384",
142
- class: "st3",
143
- d: "M11,21c-4.4,0-8-3.6-8-8c0-2.6,1.3-5,3.4-6.5c-2.2,3.2-1.8,7.4,0.9,10.2 c2.7,2.7,7,3.1,10.2,0.9C16,19.7,13.6,21,11,21z"
144
- })));
145
- };
146
- var ShortcutIcon = function ShortcutIcon(_ref5) {
147
- var sx = _ref5.sx;
148
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
149
- sx: sx
150
- }, /*#__PURE__*/React__default['default'].createElement("g", {
151
- xmlns: "http://www.w3.org/2000/svg",
152
- id: "Group_27311",
153
- transform: "translate(-0.002 -0.002)"
154
- }, /*#__PURE__*/React__default['default'].createElement("path", {
155
- id: "Subtraction_275",
156
- class: "st3",
157
- d: "M16.1,21H7.9c-2.4,0-4.4-1.7-4.8-4c0.8,1,1.9,1.5,3.2,1.5h8.2c2.3,0,4.1-1.8,4.1-4.1 V6.3C18.5,5,18,3.9,17,3.1c2.3,0.4,4,2.5,4,4.8v8.2C21,18.8,18.8,21,16.1,21z"
158
- }), /*#__PURE__*/React__default['default'].createElement("path", {
159
- id: "Subtraction_379",
160
- class: "st3",
161
- d: "M13.7,17H6.3C4.5,17,3,15.5,3,13.7V6.3C3,4.5,4.5,3,6.3,3h7.4C15.5,3,17,4.5,17,6.3 c0,0,0,0,0,0v7.4C17,15.5,15.5,17,13.7,17z M7.8,8.3c-0.1,0-0.2,0-0.3,0.1c-0.6,0.6-0.9,1.5-0.9,2.3c0,1.8,1.5,3.3,3.3,3.3 s3.3-1.5,3.3-3.3c0-1.3-0.7-2.5-1.7-3.3c-0.6-0.6-1.2-1.1-1.2-1.9c0-0.2-0.2-0.4-0.4-0.4c0,0,0,0,0,0c-0.1,0-0.3,0.1-0.3,0.2 C9,6.1,8.8,6.9,8.8,7.7C9,8.2,9.3,8.6,9.7,9c0.4,0.3,0.7,0.8,0.8,1.3c0,0.6-0.5,1.1-1.1,1.1h0c-0.6,0-1.1-0.5-1.1-1.1V8.7 c0-0.1,0-0.2-0.1-0.3C8.1,8.4,7.9,8.3,7.8,8.3z"
162
- })));
163
- };
164
- var LightbulbIcon = function LightbulbIcon(_ref6) {
165
- var sx = _ref6.sx;
166
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
167
- sx: sx
168
- }, /*#__PURE__*/React__default['default'].createElement("g", {
169
- xmlns: "http://www.w3.org/2000/svg"
170
- }, /*#__PURE__*/React__default['default'].createElement("g", {
171
- id: "Layer_3_2_"
172
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
173
- class: "st3",
174
- d: "M11.8,6.9L11.8,6.9c-2.3,0-4.1,1.8-4.1,4C7.7,12,8.1,13.1,8.7,14c0.2,0.2,0.2,0.4,0.3,0.5 c0.2,0.7,0.4,1.4,0.4,2.1c0,0.5,0.4,0.8,0.8,0.8h3.3c0.5,0,0.8-0.4,0.8-0.8l0,0c0-0.8,0.1-1.4,0.2-2.1c0.1-0.3,0.2-0.5,0.4-0.7 c0.6-0.9,0.9-1.9,1-2.9v-0.2C15.8,8.4,14,6.8,11.8,6.9z M14.4,10.9c-0.1,0.8-0.5,1.5-0.8,2.2c-0.2,0.3-0.4,0.7-0.5,1l0,0 c-0.2,0.6-0.2,1.3-0.2,1.8h-1.7c-0.1-0.6-0.3-1.3-0.4-1.8l0-0.1c-0.1-0.3-0.3-0.5-0.5-0.8c-0.5-0.7-0.8-1.5-0.9-2.3 c0-1.4,1.1-2.4,2.4-2.4h0.2c1.3-0.1,2.4,1,2.5,2.3V10.9L14.4,10.9z"
175
- }), /*#__PURE__*/React__default['default'].createElement("path", {
176
- class: "st3",
177
- d: "M19.7,9.4c-0.1,0-0.1,0-0.2,0h-2c-0.5-0.1-0.8,0.3-0.9,0.8c-0.1,0.5,0.3,0.8,0.8,0.9c0.1,0,0.1,0,0.2,0h2 c0.5,0.1,0.8-0.3,0.9-0.8C20.5,9.9,20.1,9.4,19.7,9.4z"
178
- }), /*#__PURE__*/React__default['default'].createElement("path", {
179
- class: "st3",
180
- d: "M18.6,6.3C19,6,19.1,5.6,18.8,5.2S18,4.7,17.7,5l0,0l-1.5,1.3c-0.3,0.3-0.4,0.8-0.1,1.1 c0.2,0.2,0.4,0.3,0.6,0.3s0.4-0.1,0.5-0.2L18.6,6.3z"
181
- }), /*#__PURE__*/React__default['default'].createElement("path", {
182
- class: "st3",
183
- d: "M11.8,6.4c0.5,0,0.8-0.4,0.8-0.8v-2c-0.2-0.5-0.6-0.7-1-0.5c-0.3,0.1-0.5,0.3-0.5,0.6v2 C11.1,6,11.4,6.4,11.8,6.4z"
184
- }), /*#__PURE__*/React__default['default'].createElement("path", {
185
- class: "st3",
186
- d: "M6,10c-0.1,0-0.1,0-0.2,0H4.1c-0.5,0.1-0.8,0.5-0.8,0.9c0,0.4,0.4,0.7,0.8,0.8h1.7c0.5,0.1,0.8-0.3,0.9-0.8 C6.8,10.3,6.4,10,6,10z"
187
- }), /*#__PURE__*/React__default['default'].createElement("path", {
188
- class: "st3",
189
- d: "M7.9,7c0-0.2-0.1-0.5-0.3-0.6l0,0L6.1,5.1C5.7,4.8,5.2,4.9,4.9,5.2C4.6,5.6,4.7,6.1,5.1,6.4l1.5,1.2 c0.2,0.2,0.3,0.2,0.5,0.2C7.5,7.8,7.9,7.4,7.9,7z"
190
- }), /*#__PURE__*/React__default['default'].createElement("path", {
191
- class: "st3",
192
- d: "M14,18.1H9.7c-0.1,0-0.2,0.1-0.2,0.2v1.1l0,0c0,0.1,0,0.6,0.2,0.9c0.2,0.2,0.8,0.8,0.8,0.8s0.1,0.1,0.2,0.1 h2.2c0.1,0,0.2,0,0.3-0.1c0,0,0.8-0.5,0.8-0.8c0.1-0.2,0.2-0.8,0.2-0.9l0,0v-1.1C14.1,18.1,14,18.1,14,18.1z"
193
- })))));
194
- };
195
- var TwitchIcon = function TwitchIcon(_ref7) {
196
- var sx = _ref7.sx;
197
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
198
- sx: sx
199
- }, /*#__PURE__*/React__default['default'].createElement("g", {
200
- xmlns: "http://www.w3.org/2000/svg",
201
- id: "Twitch"
202
- }, /*#__PURE__*/React__default['default'].createElement("g", {
203
- id: "Group_30490_1_",
204
- transform: "translate(4.76 51.928)"
205
- }, /*#__PURE__*/React__default['default'].createElement("g", {
206
- id: "Group_29262_1_"
207
- }, /*#__PURE__*/React__default['default'].createElement("g", {
208
- id: "Group_29258_1_"
209
- }, /*#__PURE__*/React__default['default'].createElement("path", {
210
- id: "Subtraction_13_1_",
211
- class: "st3",
212
- d: "M3-30.8L3-30.8v-3.3h-3.8v-11.5l3.2-3.2h12.2v9l-5.7,5.7H6.1L3-30.8L3-30.8z M5.8-37.9v2.2l2.1-2.3h2.7l2.5-2.5v-7H2.8v9.6H5.8z"
213
- }), /*#__PURE__*/React__default['default'].createElement("g", {
214
- transform: "matrix(1, 0, 0, 1, -4.76, -51.93)"
215
- }, /*#__PURE__*/React__default['default'].createElement("rect", {
216
- id: "Rectangle_2404-2_1_",
217
- x: "11.2",
218
- y: "6.6",
219
- class: "st3",
220
- width: "1.2",
221
- height: "3.7"
222
- })), /*#__PURE__*/React__default['default'].createElement("g", {
223
- transform: "matrix(1, 0, 0, 1, -4.76, -51.93)"
224
- }, /*#__PURE__*/React__default['default'].createElement("rect", {
225
- id: "Rectangle_2405-2_1_",
226
- x: "14.7",
227
- y: "6.6",
228
- class: "st3",
229
- width: "1.2",
230
- height: "3.7"
231
- })))))));
232
- };
233
- var BlerpyIcon = function BlerpyIcon(_ref8) {
234
- var sx = _ref8.sx;
235
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
236
- sx: sx
237
- }, /*#__PURE__*/React__default['default'].createElement("g", {
238
- xmlns: "http://www.w3.org/2000/svg",
239
- id: "Blerpy_1_"
240
- }, /*#__PURE__*/React__default['default'].createElement("path", {
241
- id: "Path_16629",
242
- class: "st3",
243
- d: "M18,10.6c-0.4-1.9,1.3-3.3,0.2-4.8c-1.6-1.9-3.5,0.7-5.2-0.1c-1.1-0.5-2.3-2.2-4-1.6 S7.5,6.9,7,8c-0.9,1.7-4,0.9-4,3.4c0,1.8,2.2,1.8,3.2,3.5c1,1.7-1.2,3.8,0.7,5.4c2.4,2,4.8-2,6.9-2.8l0,0c2.1-0.8,6.5,0.8,7.1-2.3 C21.4,12.7,18.4,12.5,18,10.6z M12.7,14.3c-1.5,0.5-3.2-0.1-4.1-1.4c-0.2-0.3-0.1-0.6,0.1-0.8C8.7,12,8.8,12,8.9,12 c0.9-0.1,1.8-0.3,2.6-0.6c0.9-0.3,1.7-0.7,2.4-1.2c0.3-0.2,0.6-0.1,0.8,0.2c0.1,0.1,0.1,0.2,0.1,0.3C15.1,12.2,14.2,13.7,12.7,14.3 L12.7,14.3z"
244
- })));
245
- };
246
- var RadarDishIcon = function RadarDishIcon(_ref9) {
247
- var sx = _ref9.sx;
248
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
249
- sx: sx
250
- }, /*#__PURE__*/React__default['default'].createElement("g", {
251
- xmlns: "http://www.w3.org/2000/svg",
252
- id: "SharingOutput"
253
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
254
- class: "st3",
255
- d: "M13.6,17.5c-2,1.2-4.6,0.8-6.2-0.8c-1.7-1.7-2-4.3-0.8-6.3C7,9.7,6.8,8.8,6.1,8.4C5.4,8,4.6,8.2,4.2,8.9 c-1.8,3.1-1.3,7.1,1.2,9.7C6.9,20.2,9,21,11,21c1.4,0,2.7-0.4,4-1.1c0.7-0.4,0.9-1.3,0.5-1.9C15.1,17.3,14.3,17.1,13.6,17.5z"
256
- }), /*#__PURE__*/React__default['default'].createElement("path", {
257
- class: "st3",
258
- d: "M9.1,15.6c0.2,0,0.4-0.1,0.5-0.2l2-2c0.5,0.1,1,0,1.3-0.3c0.6-0.6,0.6-1.4,0-2c-0.6-0.6-1.4-0.6-2,0 c-0.4,0.4-0.5,0.9-0.3,1.3l-2,2c-0.3,0.3-0.3,0.7,0,1C8.8,15.5,8.9,15.6,9.1,15.6z"
259
- }), /*#__PURE__*/React__default['default'].createElement("path", {
260
- class: "st3",
261
- d: "M12.6,6.1C12.2,6.2,12,6.6,12,7c0.1,0.4,0.5,0.6,0.8,0.5c1-0.2,2,0.1,2.7,0.8c0.7,0.7,1,1.8,0.8,2.8 c-0.1,0.4,0.2,0.8,0.6,0.8c0,0,0.1,0,0.1,0c0.3,0,0.6-0.2,0.7-0.6c0.3-1.5-0.2-3-1.2-4C15.6,6.3,14.1,5.8,12.6,6.1z"
262
- }), /*#__PURE__*/React__default['default'].createElement("path", {
263
- class: "st3",
264
- d: "M19.1,4.9c-1.5-1.6-3.7-2.2-5.8-1.8c-0.4,0.1-0.6,0.4-0.6,0.8c0.1,0.4,0.5,0.6,0.8,0.6 c1.7-0.3,3.4,0.2,4.6,1.4c1.2,1.2,1.7,2.9,1.4,4.6c-0.1,0.4,0.2,0.8,0.6,0.8c0,0,0.1,0,0.1,0c0.3,0,0.6-0.2,0.7-0.6 C21.2,8.7,20.6,6.5,19.1,4.9z"
265
- }))));
266
- };
267
- var ChannelPointsIcon = function ChannelPointsIcon(_ref10) {
268
- var sx = _ref10.sx;
269
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
270
- sx: sx
271
- }, /*#__PURE__*/React__default['default'].createElement("g", {
272
- xmlns: "http://www.w3.org/2000/svg",
273
- id: "Channel_Points"
274
- }, /*#__PURE__*/React__default['default'].createElement("g", {
275
- id: "Group_25892_1_"
276
- }, /*#__PURE__*/React__default['default'].createElement("g", {
277
- id: "Ellipse_4998_1_"
278
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
279
- class: "st3",
280
- d: "M12,21c-5,0-9-4-9-9c0-5,4-9,9-9s9,4,9,9C21,17,17,21,12,21z M12,5.2c-3.7,0-6.8,3-6.8,6.8 c0,3.7,3,6.8,6.8,6.8s6.7-3,6.7-6.8C18.7,8.3,15.7,5.2,12,5.2z"
281
- }))), /*#__PURE__*/React__default['default'].createElement("g", {
282
- id: "Path_15683_1_"
283
- }, /*#__PURE__*/React__default['default'].createElement("path", {
284
- class: "st3",
285
- d: "M16.6,11.3l-2.2,0c0-0.5-0.1-0.9-0.4-1.1c-0.4-0.4-1-0.4-1.3-0.4c0,0,0,0,0,0l0-2.2c0,0,0,0,0,0 c1.2,0,2.2,0.4,2.9,1.1C16.1,9,16.7,9.9,16.6,11.3z"
286
- })))));
287
- };
288
- var GiftIcon = function GiftIcon(_ref11) {
289
- var sx = _ref11.sx;
290
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
291
- sx: sx
292
- }, /*#__PURE__*/React__default['default'].createElement("path", {
293
- xmlns: "http://www.w3.org/2000/svg",
294
- class: "st3",
295
- d: "M19.4,7.7h-2c0.2-0.4,0.4-0.8,0.4-1.3c0-1.3-1.1-2.4-2.4-2.4c-1.8,0-2.8,1.4-3.3,2.5C11.5,5.4,10.4,4,8.7,4 C7.3,4,6.2,5.1,6.2,6.4c0,0.5,0.1,0.9,0.4,1.3h-2C4.3,7.7,4,8,4,8.3V12c0,0.3,0.3,0.6,0.6,0.6h0.9v6.9c0,0.3,0.3,0.6,0.6,0.6h11.9 c0.3,0,0.6-0.3,0.6-0.6v-6.9h0.9c0.3,0,0.6-0.3,0.6-0.6V8.3C20,8,19.7,7.7,19.4,7.7z M15.3,5.1c0.7,0,1.3,0.6,1.3,1.3 s-0.6,1.3-1.3,1.3h-2.6C13.1,6.8,13.9,5.1,15.3,5.1z M7.4,6.4c0-0.7,0.6-1.3,1.3-1.3c1.5,0,2.3,1.6,2.6,2.6H8.7 C7.9,7.7,7.4,7.1,7.4,6.4z M5.1,8.9h3.5h2.8v2.6H5.1V8.9z M6.6,12.6h4.8v6.3H6.6V12.6z M17.4,18.9h-4.8v-6.3h4.8V18.9z M18.9,11.4 h-6.3V8.9h2.8h3.5V11.4z"
296
- }));
297
- };
298
- var WalkonIcon = function WalkonIcon(_ref12) {
299
- var sx = _ref12.sx;
300
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
301
- sx: sx
302
- }, /*#__PURE__*/React__default['default'].createElement("g", {
303
- xmlns: "http://www.w3.org/2000/svg",
304
- id: "WalkOn"
305
- }, /*#__PURE__*/React__default['default'].createElement("path", {
306
- id: "Icon_metro-steps_1_",
307
- class: "st3",
308
- d: "M8.5,3C7.1,3,6,5,6,7.5c0.1,1.7,0.3,3.4,0.6,5.1c0.3,1.8,0.9,3.2,1.9,3.2 s1.8-1,1.8-2.8c0-0.6-0.5-1.6-0.5-2.4c0-1.5,0.9-2.1,0.9-3.5C10.8,4.7,10,3,8.5,3L8.5,3z M15.5,8.1c-1.4,0-2.2,1.7-2.2,4.2 c0,1.4,1,2,0.9,3.5c0,0.8-0.5,1.8-0.5,2.4c0,1.8,0.7,2.8,1.8,2.8s1.7-1.5,1.9-3.2c0.3-1.7,0.5-3.4,0.6-5.1 C18,10.2,16.9,8.1,15.5,8.1L15.5,8.1z"
309
- })));
310
- };
311
- var PointerFingerIcon = function PointerFingerIcon(_ref13) {
312
- var sx = _ref13.sx;
313
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
314
- sx: sx
315
- }, /*#__PURE__*/React__default['default'].createElement("g", {
316
- xmlns: "http://www.w3.org/2000/svg",
317
- id: "Suggest"
318
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
319
- class: "st3",
320
- d: "M17.1,12.8c-0.6,0-1,0.5-1,1.1h-0.2v-0.6c0,0,0-0.1,0-0.1c0-0.6-0.5-1-1.1-1c-0.6,0-1,0.5-1,1.1v0.6h-0.2 c0,0,0-1.1,0-1.2c0-0.6-0.5-1-1.1-1c-0.6,0-1,0.5-1,1.1v1.1h-0.2V8.5c0,0,0,0,0,0c0-0.6-0.4-1-1-1.1c-0.6,0-1,0.5-1,1.1v7.3 l-0.8-1.1c0,0,0,0,0-0.1c-0.3-0.4-0.9-0.5-1.4-0.2c-0.5,0.4-0.6,1-0.2,1.5l3.2,4.6c0.2,0.3,0.5,0.4,0.8,0.4h5.2 c0.5,0,0.9-0.3,1-0.8l0.8-3.6c0-0.1,0-0.2,0-0.2v-2.5v0c0,0,0-0.1,0-0.1C18.1,13.2,17.6,12.7,17.1,12.8z"
321
- }), /*#__PURE__*/React__default['default'].createElement("path", {
322
- class: "st3",
323
- d: "M12.3,8.4c0,0.2,0.2,0.4,0.4,0.4h1.9c0.2,0,0.4-0.2,0.4-0.4c0-0.2-0.2-0.4-0.4-0.4h-1.9 C12.5,8,12.3,8.2,12.3,8.4z"
324
- }), /*#__PURE__*/React__default['default'].createElement("path", {
325
- class: "st3",
326
- d: "M12.4,7.1c0.1,0,0.2,0,0.2-0.1l1.6-1.4c0.1-0.1,0.2-0.4,0-0.5c-0.1-0.1-0.4-0.2-0.5,0l-1.6,1.4 c-0.1,0.1-0.2,0.4,0,0.5C12.2,7.1,12.3,7.1,12.4,7.1z"
327
- }), /*#__PURE__*/React__default['default'].createElement("path", {
328
- class: "st3",
329
- d: "M10.5,6.1c0.2,0,0.4-0.2,0.4-0.4V3.4c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.4,0.2-0.4,0.4v2.4 C10.2,5.9,10.3,6.1,10.5,6.1z"
330
- }), /*#__PURE__*/React__default['default'].createElement("path", {
331
- class: "st3",
332
- d: "M8.5,8.4C8.5,8.2,8.3,8,8.2,8H6.2C6,8,5.9,8.2,5.9,8.4c0,0.2,0.2,0.4,0.4,0.4h1.9C8.3,8.7,8.5,8.6,8.5,8.4z"
333
- }), /*#__PURE__*/React__default['default'].createElement("path", {
334
- class: "st3",
335
- d: "M8.1,7c0.1,0.1,0.1,0.1,0.2,0.1c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.4,0-0.5L7,5.1C6.8,4.9,6.6,5,6.5,5.1 c-0.1,0.1-0.1,0.4,0,0.5L8.1,7z"
336
- }))));
337
- };
338
- var UnsafeIcon = function UnsafeIcon(_ref14) {
339
- var sx = _ref14.sx;
340
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
341
- sx: sx
342
- }, /*#__PURE__*/React__default['default'].createElement("g", {
343
- xmlns: "http://www.w3.org/2000/svg",
344
- id: "Unsafe"
345
- }, /*#__PURE__*/React__default['default'].createElement("g", {
346
- id: "Group_30027",
347
- transform: "translate(0.001)"
348
- }, /*#__PURE__*/React__default['default'].createElement("path", {
349
- id: "Subtraction_1057",
350
- class: "st3",
351
- d: "M12,21c-1.2-0.5-2.2-1.2-3.2-2c-1.5-1-2.7-2.3-3.7-3.8c-0.6-1.6-1-3.3-1-5 c-0.2-1.5,0-3,0.4-4.4C5.2,4.2,11.3,3,12,3c0.8,0,6.6,1.3,7.6,2.8s0.3,7.1-0.9,9.4c-1,1.5-2.2,2.7-3.6,3.8 C14.2,19.8,13.1,20.5,12,21z M11.8,12L11.8,12l2.4,2.3c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.3,0.2-0.4 c0-0.2-0.1-0.3-0.2-0.4l-2.4-2.3l2.4-2.3c0.1-0.1,0.2-0.3,0.2-0.4c0-0.2-0.1-0.3-0.2-0.4C15,8,14.8,7.9,14.6,7.9 c-0.2,0-0.3,0.1-0.4,0.2l-2.4,2.3L9.5,8.2C9.4,8.1,9.2,8,9.1,8C8.9,8,8.7,8.1,8.6,8.2C8.5,8.3,8.4,8.5,8.4,8.6 c0,0.2,0.1,0.3,0.2,0.4l2.3,2.2l-2.3,2.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0.2,0.1,0.3,0.2,0.4c0.1,0.1,0.3,0.2,0.4,0.2 c0.2,0,0.3-0.1,0.4-0.2L11.8,12L11.8,12z"
352
- }))));
353
- };
354
- var DiscordIcon = function DiscordIcon(_ref15) {
355
- var sx = _ref15.sx;
356
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
357
- sx: sx
358
- }, /*#__PURE__*/React__default['default'].createElement("g", {
359
- xmlns: "http://www.w3.org/2000/svg",
360
- id: "Discord"
361
- }, /*#__PURE__*/React__default['default'].createElement("g", {
362
- id: "Discord_logo",
363
- transform: "translate(-733.648 -925.604)"
364
- }, /*#__PURE__*/React__default['default'].createElement("path", {
365
- id: "Path_4058",
366
- class: "st3",
367
- d: "M743.7,935.3c-0.5,0-0.9,0.5-0.9,1.1c0,0.5,0.5,0.9,1.1,0.9c0.5,0,0.9-0.5,0.9-1 C744.8,935.7,744.3,935.3,743.7,935.3C743.8,935.3,743.7,935.3,743.7,935.3z M747.6,935.3c-0.5,0-0.9,0.5-0.9,1.1 c0,0.5,0.5,0.9,1.1,0.9c0.5,0,0.9-0.5,0.9-1C748.6,935.7,748.1,935.3,747.6,935.3C747.6,935.3,747.6,935.3,747.6,935.3z"
368
- }), /*#__PURE__*/React__default['default'].createElement("path", {
369
- id: "Discord_logo-2",
370
- class: "st3",
371
- d: "M751.7,928.6h-12.1c-1,0-1.8,0.8-1.8,1.9c0,0,0,0,0,0v12.2c0,1,0.8,1.9,1.8,1.9 c0,0,0,0,0,0h10.2l-0.5-1.7l1.2,1.1l1.1,1l1.9,1.7v-16.1C753.5,929.4,752.7,928.6,751.7,928.6 C751.7,928.6,751.7,928.6,751.7,928.6z M748.2,940.4c0,0-0.3-0.4-0.6-0.7c0.7-0.2,1.2-0.5,1.6-1.1c-0.3,0.2-0.7,0.4-1,0.5 c-0.4,0.2-0.9,0.3-1.3,0.4c-0.8,0.1-1.6,0.1-2.3,0c-0.5-0.1-0.9-0.2-1.3-0.4c-0.2-0.1-0.4-0.2-0.7-0.3c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c-0.2-0.1-0.3-0.2-0.3-0.2c0.4,0.5,0.9,0.9,1.6,1.1c-0.3,0.3-0.6,0.7-0.6,0.7c-1.1,0-2.1-0.5-2.7-1.4 c0-1.8,0.5-3.6,1.3-5.2c0.7-0.6,1.6-0.9,2.5-0.9l0.1,0.1c-0.9,0.2-1.7,0.6-2.4,1.2c0,0,0.2-0.1,0.5-0.3c0.6-0.3,1.3-0.5,2-0.6 c0.1,0,0.1,0,0.2,0c0.6-0.1,1.2-0.1,1.8,0c1,0.1,1.9,0.4,2.7,0.9c-0.7-0.5-1.4-0.9-2.2-1.1l0.1-0.1c0.9,0,1.8,0.4,2.5,0.9 c0.8,1.6,1.3,3.4,1.3,5.2C750.3,939.9,749.3,940.4,748.2,940.4z"
372
- }))));
373
- };
374
- var BookmarkAddRounded = function BookmarkAddRounded(_ref16) {
375
- var sx = _ref16.sx;
376
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
377
- sx: sx
378
- }, /*#__PURE__*/React__default['default'].createElement("g", {
379
- xmlns: "http://www.w3.org/2000/svg",
380
- id: "bookmark_add"
381
- }, /*#__PURE__*/React__default['default'].createElement("g", {
382
- id: "Bookmarkopen-StarlingPurple",
383
- transform: "translate(0.75)"
384
- }, /*#__PURE__*/React__default['default'].createElement("path", {
385
- id: "Union_1",
386
- class: "st7",
387
- d: "M13.8,9.7V8.6h-1.1c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7c0,0,0,0,0,0h1.1V6.1 c0-0.4,0.4-0.7,0.8-0.7c0.4,0,0.7,0.3,0.7,0.7v1.1h1.1c0.4,0,0.7,0.3,0.7,0.7s-0.3,0.7-0.7,0.7c0,0,0,0,0,0h-1.1v1.1 c0,0.4-0.4,0.7-0.8,0.7C14.1,10.4,13.8,10.1,13.8,9.7z"
388
- }), /*#__PURE__*/React__default['default'].createElement("g", {
389
- id: "Path_16725"
390
- }, /*#__PURE__*/React__default['default'].createElement("path", {
391
- class: "st7",
392
- d: "M14.2,18.6c-0.6,0-1.3-0.5-1.7-0.8l-2.1-1.5l-2.7,1.9c-0.3,0.3-0.8,0.4-1.3,0.3c-0.7-0.2-1-0.8-1-1.3 l0.1-8.2C5.5,8.5,5.7,8,6,7.6c0.5-0.4,1-0.7,1.6-0.7l3.4,0v1.5H7.6c-0.2,0-0.4,0.1-0.6,0.3C7,8.7,7,8.9,7,9.1L6.9,17l3.5-2.5 l3,2.2c0.2,0.1,0.3,0.2,0.5,0.3c0,0,0,0,0,0l0-5.3h1.5v5.3c0,0.6-0.2,1.5-1,1.7C14.3,18.6,14.2,18.6,14.2,18.6z"
393
- })))));
394
- };
395
- var DiamondIcon = function DiamondIcon(_ref17) {
396
- var sx = _ref17.sx;
397
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
398
- sx: sx
399
- }, /*#__PURE__*/React__default['default'].createElement("g", {
400
- xmlns: "http://www.w3.org/2000/svg",
401
- id: "Group_32567",
402
- transform: "translate(-10106.58 -641)"
403
- }, /*#__PURE__*/React__default['default'].createElement("path", {
404
- id: "Subtraction_1462",
405
- class: "st0",
406
- d: "M10118.5,660.2c-0.3,0-0.7-0.1-0.9-0.2l-7.5-7.4c-0.7-0.6-0.7-1.5-0.3-2.2l2.5-3.4 c0.6-0.7,1.5-1.1,2.4-1.1h7.7c0.9-0.1,1.8,0.3,2.4,1.1l2.6,3.5c0.4,0.7,0.2,1.6-0.4,2.1l-7.5,7.4 C10119.2,660.1,10118.8,660.2,10118.5,660.2z M10122.7,648.6c-0.1,0-0.2,0.1-0.2,0.2c0,0.2,0.2,0.5,0.4,0.7 c0.3,0.4,0.5,0.9,0.5,1.4c0,0.2-0.1,0.6-0.2,0.7c-0.4,0.7-1,1.4-1.6,2c-0.8,0.9-1.7,1.7-1.5,1.9l0.2,0.2c0.6,0,3.2-3.2,3.2-3.2 c0.3-0.4,0.5-0.8,0.6-1.3c-0.1-0.7-0.3-1.2-0.7-1.8C10123.3,649.2,10122.9,648.6,10122.7,648.6L10122.7,648.6z"
407
- })));
408
- };
409
- var BlerpCardIcon = function BlerpCardIcon(_ref18) {
410
- var sx = _ref18.sx;
411
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
412
- sx: sx
413
- }, /*#__PURE__*/React__default['default'].createElement("g", {
414
- xmlns: "http://www.w3.org/2000/svg",
415
- id: "Layer_21"
416
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
417
- class: "st3",
418
- d: "M9.8,3H9C8.5,3,8.1,3.2,7.8,3.5L9.8,3z"
419
- }), /*#__PURE__*/React__default['default'].createElement("path", {
420
- class: "st3",
421
- d: "M18.3,3h-3.1c0,0.1,0.1,0.2,0.1,0.3l3.8,14.2c0.1,0.4,0.1,0.9-0.2,1.3c-0.2,0.4-0.6,0.7-1,0.8l-4.6,1.2h4.9 c0.9,0,1.6-0.7,1.6-1.6V4.6C19.9,3.7,19.2,3,18.3,3z"
422
- })), /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
423
- class: "st3",
424
- d: "M18.2,17.8L14.3,3.6c0-0.2-0.1-0.3-0.3-0.4c-0.1-0.1-0.3-0.1-0.5-0.1l-9,2.4C4.3,5.6,4.1,6,4.1,6.3L8,20.5 c0.1,0.3,0.4,0.5,0.8,0.4l9-2.4c0.2,0,0.3-0.1,0.4-0.3C18.2,18.1,18.2,18,18.2,17.8z M15.5,13.7c-0.3,1.4-2.3,0.7-3.3,1.1 c-1,0.4-2.1,2.2-3.2,1.3c-0.9-0.8,0.1-1.7-0.3-2.5c-0.4-0.8-1.5-0.8-1.5-1.6c0-1.2,1.4-0.8,1.8-1.6C9.3,9.9,9.2,8.9,10,8.7 c0.8-0.3,1.3,0.5,1.8,0.7c0.8,0.4,1.7-0.9,2.4,0c0.5,0.7-0.2,1.3-0.1,2.2C14.3,12.5,15.7,12.6,15.5,13.7z"
425
- }), /*#__PURE__*/React__default['default'].createElement("path", {
426
- class: "st3",
427
- d: "M12.3,11.4c-0.4,0.2-0.7,0.4-1.1,0.6c-0.4,0.1-0.8,0.2-1.2,0.3c0,0-0.1,0-0.1,0.1c-0.1,0.1-0.1,0.3-0.1,0.4 c0.4,0.6,1.2,0.9,1.9,0.6l0,0c0.7-0.3,1.1-1,1-1.7c0,0,0-0.1,0-0.1C12.6,11.3,12.4,11.3,12.3,11.4z"
428
- })))));
429
- };
430
- var CrownIcon = function CrownIcon(_ref19) {
431
- var sx = _ref19.sx;
432
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
433
- sx: sx
434
- }, /*#__PURE__*/React__default['default'].createElement("g", {
435
- xmlns: "http://www.w3.org/2000/svg",
436
- id: "Crown"
437
- }, /*#__PURE__*/React__default['default'].createElement("path", {
438
- id: "Icon_awesome-crown",
439
- class: "st3",
440
- d: "M17.8,17.4H6.2c-0.2,0-0.4,0.2-0.4,0.4v0.9c0,0.2,0.2,0.4,0.4,0.4h11.7 c0.2,0,0.4-0.2,0.4-0.4v-0.9C18.3,17.6,18.1,17.4,17.8,17.4C17.8,17.4,17.8,17.4,17.8,17.4z M19.6,8.4c-0.7,0-1.3,0.6-1.3,1.4 c0,0,0,0,0,0c0,0.2,0,0.4,0.1,0.6l-2,1.2c-0.4,0.3-1,0.1-1.2-0.3c0,0,0,0,0,0l-2.3-4c0.6-0.5,0.7-1.3,0.2-1.9 c-0.5-0.6-1.3-0.7-1.9-0.2C10.6,5.6,10.5,6.4,11,7c0.1,0.1,0.1,0.1,0.2,0.2l-2.3,4c-0.2,0.4-0.8,0.6-1.2,0.3c0,0,0,0,0,0l-2-1.2 c0.3-0.7,0-1.5-0.7-1.8s-1.5,0-1.8,0.7s0,1.5,0.7,1.8c0.2,0.1,0.4,0.1,0.6,0.1c0.1,0,0.1,0,0.2,0l2,5.4h10.8l2-5.4 c0.1,0,0.1,0,0.2,0c0.7,0,1.3-0.6,1.3-1.3C21,9,20.4,8.4,19.6,8.4L19.6,8.4z"
441
- })));
442
- };
443
- var CogIcon = function CogIcon(_ref20) {
444
- var sx = _ref20.sx;
445
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
446
- sx: sx
447
- }, /*#__PURE__*/React__default['default'].createElement("g", {
448
- xmlns: "http://www.w3.org/2000/svg",
449
- id: "Layer_22"
450
- }, /*#__PURE__*/React__default['default'].createElement("path", {
451
- id: "Settings-IbisRed",
452
- class: "st3",
453
- d: "M12,21c-0.9,0-1.6-0.7-1.6-1.6v-0.1c-0.1-0.8-0.7-1.3-1.4-1.3c-0.4,0-0.7,0.1-0.9,0.4 l0,0c-0.6,0.6-1.7,0.7-2.3,0s-0.7-1.7,0-2.3c0,0,0,0,0,0l0,0c0.5-0.5,0.5-1.4,0-1.9c-0.2-0.2-0.6-0.4-0.9-0.4H4.6 C3.7,13.7,3,13,3,12s0.7-1.6,1.6-1.6h0.1c0.6,0,1-0.4,1.2-0.9C6.1,9,6,8.4,5.7,8L5.6,8C5,7.4,5,6.3,5.6,5.7s1.7-0.6,2.3,0l0,0l0,0 c0.4,0.4,1,0.5,1.5,0.3h0.1c0.5-0.2,0.8-0.7,0.8-1.2V4.6C10.4,3.7,11.1,3,12,3c0.9,0,1.6,0.7,1.6,1.6v0.1c0,0.5,0.3,1,0.8,1.2 c0.5,0.2,1.1,0.1,1.5-0.3l0,0c0.3-0.3,0.7-0.5,1.2-0.5c0.9,0,1.6,0.7,1.6,1.6c0,0.4-0.2,0.8-0.5,1.2l0,0c-0.4,0.4-0.5,1-0.3,1.5 v0.1c0.2,0.5,0.7,0.8,1.2,0.8h0.1c0.9,0,1.6,0.7,1.7,1.6c0,0.9-0.7,1.6-1.6,1.7c0,0,0,0-0.1,0h-0.1c-0.7,0-1.4,0.6-1.3,1.4 c0,0.3,0.1,0.7,0.4,0.9l0,0c0.6,0.6,0.6,1.7,0,2.3c-0.6,0.6-1.7,0.6-2.3,0l0,0l0,0c-0.5-0.5-1.4-0.5-1.9,0 c-0.2,0.3-0.4,0.6-0.4,0.9v0.1C13.7,20.2,12.9,21,12,21z M12,9.5c-1.4,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4l0,0 C14.4,10.6,13.3,9.5,12,9.5z"
454
- })));
455
- };
456
- var ClockIcon = function ClockIcon(_ref21) {
457
- var sx = _ref21.sx;
458
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
459
- sx: sx
460
- }, /*#__PURE__*/React__default['default'].createElement("g", {
461
- xmlns: "http://www.w3.org/2000/svg",
462
- id: "Layer_23"
463
- }, /*#__PURE__*/React__default['default'].createElement("path", {
464
- id: "icon_datetime_clock",
465
- class: "st0",
466
- d: "M12,18.9c4,0,7.2-3.2,7.2-7.2S16,4.5,12,4.5s-7.2,3.2-7.2,7.2S8,18.9,12,18.9 M12,2.7 c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S7,2.7,12,2.7 M12.4,7.2v4.7l4.1,2.4l-0.7,1.1l-4.7-2.8V7.2H12.4z"
467
- })));
468
- };
469
-
470
- var useWindowSize = function useWindowSize() {
471
- var isClient = (typeof window === "undefined" ? "undefined" : _typeof__default['default'](window)) === "object";
472
-
473
- function getSize() {
474
- return {
475
- width: isClient ? window.innerWidth : undefined,
476
- height: isClient ? window.innerHeight : undefined
477
- };
478
- }
479
-
480
- var _useState = React.useState(getSize),
481
- _useState2 = _slicedToArray__default['default'](_useState, 2),
482
- windowSize = _useState2[0],
483
- setWindowSize = _useState2[1];
484
-
485
- React.useEffect(function () {
486
- if (!isClient) {
487
- return false;
488
- }
489
-
490
- function handleResize() {
491
- setWindowSize(getSize());
492
- }
493
-
494
- window.addEventListener("resize", handleResize);
495
- return function () {
496
- return window.removeEventListener("resize", handleResize);
497
- };
498
- }, []); // Empty array ensures that effect is only run on mount and unmount
499
-
500
- return windowSize;
501
- };
502
-
503
- var _templateObject$9, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$2, _templateObject8;
504
- // _id: "5b237fbafca7167a35619410",
505
- // title: "Crying",
506
- // image: {
507
- // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
508
- // original: {
509
- // url:
510
- // "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
511
- // },
512
- // },
513
- // audio: {
514
- // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
515
- // original: {
516
- // url:
517
- // "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
518
- // },
519
- // },
520
- // };
521
-
522
- styled__default['default'].div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral__default['default'](["\n /* width: sizeParams.width,\n height: sizeParams.height, */\n /* display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n border-radius: 8px;\n border: 2px solid; */\n /* border-color: grey2.main;\n background-color: isSelected ? grey2.main : white.main; */\n /* transition: 0.3s;\n position: relative;\n cursor: pointer; */\n /* & hover {\n background-color: grey2.main;\n border: 2px solid transparent;\n } */\n"])));
523
- var BlerpImage$1 = styled__default['default'].div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
524
- return props.url;
525
- });
526
- var zoomIn$1 = styled.keyframes(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
527
- var ReactionModal = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 8px;\n transform: scale(0);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: ", "D3;\n border: 2px solid ", "D3;\n backdrop-filter: blur(4px);\n animation: ", " 0.2s forwards;\n z-index: 5;\n"])), function (props) {
528
- return props.theme.colors.notBlackOverride;
529
- }, function (props) {
530
- return props.theme.colors.notBlackOverride;
531
- }, zoomIn$1);
532
- var SaveContainer$1 = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n"])), function (props) {
533
- return props.theme.colors.whiteOverride;
534
- });
535
- var BlerpImageScrim$1 = styled__default['default'].div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
536
- return props.theme.colors.notBlackOverride;
537
- }, function (props) {
538
- return props.theme.colors.notBlackOverride;
539
- }, SaveContainer$1);
540
- var ReactionButton$1 = styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral__default['default'](["\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n transition: 0.2s;\n margin-right: 0;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
541
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override;
542
- }, function (props) {
543
- return props.theme.colors.ibisRed;
544
- });
545
- var LineClamp = styled__default['default'].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
546
- var reactionIconUrls$1 = {
547
- FUNNY: "https://storage.googleapis.com/blerp_products/Icons/Funny%403x.svg",
548
- MUSIC: "https://storage.googleapis.com/blerp_products/Icons/Music%403x.svg",
549
- NSFW: "https://storage.googleapis.com/blerp_products/Icons/NSFW%403x.svg",
550
- SAD: "https://storage.googleapis.com/blerp_products/Icons/Sad%403x.svg ",
551
- SCARY: "https://storage.googleapis.com/blerp_products/Icons/Scary%403x.svg",
552
- ANGRY: "https://storage.googleapis.com/blerp_products/Icons/Anger%403x.svg",
553
- HAPPY: "https://storage.googleapis.com/blerp_products/Icons/Happy%403x.svg",
554
- TROLL: "https://storage.googleapis.com/blerp_products/Icons/Troll%403x.svg",
555
- SHOCKED: "https://storage.googleapis.com/blerp_products/Icons/Shock.svg",
556
- LOVE: "https://storage.googleapis.com/blerp_products/Icons/Heart%403x.svg"
557
- };
558
- var Blerp$1 = function Blerp(_ref) {
559
- var _bite$image, _bite$image$original, _bite$topReactions, _bite$topReactions2, _bite$topReactions3, _bite$image2, _bite$image2$original;
560
-
561
- var bite = _ref.bite,
562
- collections = _ref.collections,
563
- variantSize = _ref.variantSize;
564
- _ref.userSignedIn;
565
- var isSelected = _ref.isSelected,
566
- playingState = _ref.playingState,
567
- primaryActionButton = _ref.primaryActionButton,
568
- secondaryActionButton = _ref.secondaryActionButton,
569
- unsaveButton = _ref.unsaveButton,
570
- getUserReactions = _ref.getUserReactions;
571
- _ref.createCollection;
572
- var handleClickBackground = _ref.handleClickBackground,
573
- handleClickPlay = _ref.handleClickPlay,
574
- handleClickThreeDot = _ref.handleClickThreeDot,
575
- handleClickSave = _ref.handleClickSave,
576
- handleClickReaction = _ref.handleClickReaction,
577
- handleClickUnsave = _ref.handleClickUnsave,
578
- handleClickTitle = _ref.handleClickTitle;
579
- _ref.handleClickOrganize;
580
- var handleClickCollection = _ref.handleClickCollection,
581
- isLinkTitle = _ref.isLinkTitle,
582
- isPremium = _ref.isPremium,
583
- isUnlocked = _ref.isUnlocked;
584
- _ref.props;
585
-
586
- var _useState = React.useState(false),
587
- _useState2 = _slicedToArray__default['default'](_useState, 2),
588
- openSave = _useState2[0],
589
- setOpenSave = _useState2[1];
590
-
591
- var _useState3 = React.useState(false),
592
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
593
- openOrganize = _useState4[0],
594
- setOpenOrganize = _useState4[1];
595
-
596
- var size = useWindowSize();
597
-
598
- var _useState5 = React.useState(null),
599
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
600
- profileColors = _useState6[0],
601
- setProfileColors = _useState6[1];
602
-
603
- var _useState7 = React.useState(false),
604
- _useState8 = _slicedToArray__default['default'](_useState7, 2),
605
- isBlerpHovered = _useState8[0],
606
- setIsBlerpHovered = _useState8[1];
607
-
608
- var ranges = [{
609
- divider: 1e9,
610
- suffix: "B"
611
- }, {
612
- divider: 1e6,
613
- suffix: "M"
614
- }, {
615
- divider: 1e3,
616
- suffix: "k"
617
- }]; // console.log(bite?.image?.original?.url, profileColors);
618
-
619
- function formatNumber(n) {
620
- for (var i = 0; i < ranges.length; i++) {
621
- if (n >= ranges[i].divider) {
622
- return (n / ranges[i].divider).toFixed(2).toString() + ranges[i].suffix;
623
- }
624
- }
625
-
626
- return n.toString();
627
- }
628
-
629
- var sizeParams;
630
- var smallSize = {
631
- width: 150,
632
- height: 160,
633
- fontSize: "14px",
634
- imageSize: "90px",
635
- reactionSpacing: 1,
636
- reactionPadding: "3px",
637
- reactionSize: "16px",
638
- buttonSize: "small"
639
- };
640
- var mediumSize = {
641
- width: 180,
642
- height: 190,
643
- fontSize: "18px",
644
- imageSize: "100px",
645
- reactionSpacing: 1,
646
- reactionPadding: "3px",
647
- reactionSize: "20px",
648
- buttonSize: "medium"
649
- };
650
- var largeSize = {
651
- width: 220,
652
- height: 234,
653
- fontSize: "20px",
654
- imageSize: "135px",
655
- reactionSpacing: 1,
656
- reactionPadding: "5px",
657
- reactionSize: "24px",
658
- buttonFontSize: "large"
659
- };
660
-
661
- if (!variantSize) {
662
- if (size.width <= 400) {
663
- sizeParams = smallSize;
664
- } else if (size.width <= 900) {
665
- sizeParams = mediumSize;
666
- } else if (size.width > 900) {
667
- sizeParams = largeSize;
668
- }
669
- } else {
670
- if (variantSize === "small") {
671
- sizeParams = smallSize;
672
- } else if (variantSize === "medium") {
673
- sizeParams = mediumSize;
674
- } else if (variantSize === "large") {
675
- sizeParams = largeSize;
676
- }
677
- }
678
-
679
- var renderCollectionList = function renderCollectionList() {
680
- return collections === null || collections === void 0 ? void 0 : collections.map(function (collection, index) {
681
- return /*#__PURE__*/React__default['default'].createElement(Text, {
682
- onClick: function onClick() {
683
- return handleClickCollection();
684
- },
685
- sx: {
686
- cursor: "pointer",
687
- color: "white.override",
688
- ":hover": {
689
- color: "ibisRed.main"
690
- }
691
- }
692
- }, collection.title);
693
- });
694
- };
695
-
696
- return /*#__PURE__*/React__default['default'].createElement(Box, {
697
- onClick: function onClick(e) {
698
- e.stopPropagation();
699
- handleClickBackground();
700
- },
701
- onMouseEnter: function onMouseEnter(e) {
702
- return setIsBlerpHovered(true);
703
- },
704
- onMouseLeave: function onMouseLeave(e) {
705
- return setIsBlerpHovered(false);
706
- },
707
- sx: {
708
- width: sizeParams.width,
709
- height: sizeParams.height,
710
- display: "flex",
711
- flexDirection: "column",
712
- alignItems: "center",
713
- justifyContent: "flex-start",
714
- borderRadius: "8px",
715
- border: "2px solid",
716
- borderColor: "grey2.main",
717
- overflow: "hidden",
718
- // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
719
- // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
720
- backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
721
- transition: "0.3s",
722
- position: "relative",
723
- cursor: "pointer",
724
- "&:hover": {
725
- bgcolor: isPremium ? "white.main" : "grey2.main",
726
- border: isPremium ? profileColors ? "2px solid ".concat(profileColors[0]) : "2px solid grey" : "2px solid transparent"
727
- },
728
- "& .reaction-icon-blrp": {
729
- transition: "0.3s",
730
- opacity: 0.64
731
- },
732
- "&:hover .reaction-icon-blrp": {
733
- opacity: "1"
734
- },
735
- "& .unsafe-icon-blrp": {
736
- transition: "0.3s",
737
- opacity: 0.5
738
- },
739
- "&:hover .unsafe-icon-blrp": {
740
- opacity: "1"
741
- }
742
- }
743
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
744
- sx: {
745
- position: "absolute",
746
- top: "0",
747
- bottom: "0",
748
- left: "0",
749
- right: "0",
750
- background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0], ", black)") : "white.main",
751
- transition: "opacity .15s ease-in-out",
752
- opacity: isPremium ? isUnlocked ? isBlerpHovered ? ".8" : ".6" : isBlerpHovered ? ".6" : ".2" : "0"
753
- }
754
- }), /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
755
- src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
756
- getColors: function getColors(colors) {
757
- return setProfileColors(colors);
758
- }
759
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
760
- fontSize: "12px",
761
- color: "notBlack.main",
762
- sx: {
763
- position: "absolute",
764
- top: "30px",
765
- left: "10px"
766
- }
767
- }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
768
- title: "May contain potentially sensitive content",
769
- sx: {
770
- wordWrap: "break-word"
771
- }
772
- }, /*#__PURE__*/React__default['default'].createElement(IconButton, {
773
- className: "unsafe-icon-blrp",
774
- sx: {
775
- position: "absolute",
776
- top: "30px",
777
- right: "5px",
778
- padding: "0"
779
- }
780
- }, /*#__PURE__*/React__default['default'].createElement(UnsafeIcon, {
781
- sx: {
782
- fontSize: "18px",
783
- color: "ibisRed.main"
784
- }
785
- }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
786
- direction: "row",
787
- width: "100%",
788
- justifyContent: "space-between",
789
- alignItems: "center",
790
- spacing: 2,
791
- position: sizeParams.buttonSize === "small" && "absolute"
792
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
793
- direction: "row",
794
- alignItems: "center"
795
- }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
796
- onClick: function onClick(e) {
797
- e.stopPropagation();
798
- getUserReactions();
799
- setOpenSave(true);
800
- },
801
- sx: {
802
- color: "notBlack.main",
803
- padding: "4px"
804
- }
805
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
806
- fontSize: "small"
807
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
808
- onClick: function onClick(e) {
809
- e.stopPropagation();
810
- getUserReactions();
811
- handleClickSave();
812
- setOpenSave(true);
813
- },
814
- sx: {
815
- color: "notBlack.main",
816
- padding: "4px"
817
- }
818
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
819
- fontSize: "small"
820
- })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React__default['default'].createElement(Text, {
821
- color: "notBlack.main",
822
- fontWeight: "light",
823
- fontSize: "12px",
824
- marginRight: "8px"
825
- }, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React__default['default'].createElement(Stack, {
826
- direction: "row",
827
- position: "relative",
828
- width: "40px",
829
- height: "20px"
830
- }, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map(function (reaction, index) {
831
- return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
832
- title: reaction
833
- }, /*#__PURE__*/React__default['default'].createElement("img", {
834
- alt: "test",
835
- className: "reaction-icon-blrp",
836
- style: {
837
- width: "20px",
838
- height: "20px",
839
- position: "absolute",
840
- top: 0,
841
- left: "".concat(index * 12, "px"),
842
- zIndex: index
843
- },
844
- src: reactionIconUrls$1[reaction]
845
- }));
846
- }))), /*#__PURE__*/React__default['default'].createElement("div", null, secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(IconButton, {
847
- onClick: function onClick(e) {
848
- handleClickThreeDot(e);
849
- },
850
- sx: {
851
- color: "notBlack.main",
852
- padding: "5px"
853
- }
854
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], null)))), /*#__PURE__*/React__default['default'].createElement(Stack, {
855
- direction: "row",
856
- marginTop: sizeParams.buttonSize === "small" && "28px"
857
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$1, {
858
- style: {
859
- width: sizeParams.imageSize,
860
- height: sizeParams.imageSize
861
- },
862
- url: bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url
863
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim$1, {
864
- style: {
865
- width: sizeParams.imageSize,
866
- height: sizeParams.imageSize
867
- },
868
- onClick: function onClick() {
869
- return handleClickPlay();
870
- }
871
- }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
872
- sx: {
873
- width: "50px",
874
- height: "50px",
875
- color: "white.override"
876
- }
877
- }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
878
- sx: {
879
- width: "40px",
880
- height: "40px",
881
- color: "white.override"
882
- }
883
- }), primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
884
- onClick: function onClick(e) {
885
- e.stopPropagation();
886
- getUserReactions();
887
- !(bite !== null && bite !== void 0 && bite.saved) && handleClickSave();
888
- setOpenSave(true);
889
- }
890
- }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
891
- sx: {
892
- color: "starling.main"
893
- }
894
- }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
895
- sx: {
896
- fontSize: "32px",
897
- color: "starling.main"
898
- }
899
- }))))), /*#__PURE__*/React__default['default'].createElement(Stack, {
900
- direction: "row",
901
- sx: {
902
- width: "80%",
903
- margin: "auto",
904
- textAlign: "center"
905
- }
906
- }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(LineClamp, {
907
- onClick: function onClick(e) {
908
- if (handleClickTitle) {
909
- e.stopPropagation();
910
- handleClickTitle();
911
- }
912
- }
913
- }, /*#__PURE__*/React__default['default'].createElement("a", {
914
- href: "/soundbites/".concat(bite._id),
915
- style: {
916
- textDecoration: "none"
917
- }
918
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
919
- textAlign: "center",
920
- fontSize: sizeParams.fontSize,
921
- color: "notBlack.main",
922
- sx: {
923
- ":hover": {
924
- textDecoration: handleClickTitle ? "underline" : "none"
925
- }
926
- },
927
- lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
928
- }, bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp, {
929
- onClick: function onClick(e) {
930
- if (handleClickTitle) {
931
- e.stopPropagation();
932
- handleClickTitle();
933
- }
934
- }
935
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
936
- textAlign: "center",
937
- fontSize: sizeParams.fontSize,
938
- color: "notBlack.main",
939
- sx: {
940
- ":hover": {
941
- textDecoration: handleClickTitle ? "underline" : "none"
942
- }
943
- },
944
- lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
945
- }, bite.title))), openSave && /*#__PURE__*/React__default['default'].createElement(ReactionModal, {
946
- open: openSave
947
- }, openOrganize ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
948
- direction: "row",
949
- onClick: function onClick() {
950
- setOpenOrganize(false);
951
- }
952
- }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.KeyboardArrowLeftRounded, {
953
- sx: {
954
- color: "white.override"
955
- }
956
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
957
- color: "white.override"
958
- }, "Add to Collection")), /*#__PURE__*/React__default['default'].createElement(Stack, {
959
- justifyContent: "flex-start",
960
- alignItems: "center",
961
- width: "100%",
962
- height: "70%",
963
- overflow: "auto"
964
- }, renderCollectionList())) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
965
- onClick: function onClick() {
966
- setOpenSave(false);
967
- },
968
- sx: {
969
- color: "white.override",
970
- position: "absolute",
971
- top: "0",
972
- right: "0"
973
- }
974
- }), /*#__PURE__*/React__default['default'].createElement(Grid, {
975
- display: "grid",
976
- gridTemplateColumns: "repeat(5, 1fr)",
977
- alignItems: "center",
978
- marginTop: "16px",
979
- gap: 1
980
- }, Object.keys(reactionIconUrls$1).map(function (reaction) {
981
- var _bite$userReactions, _sizeParams, _sizeParams2, _sizeParams3;
982
-
983
- return /*#__PURE__*/React__default['default'].createElement(Grid, {
984
- key: "".concat(reaction, "-button"),
985
- gridColumn: "span 1",
986
- display: "flex",
987
- justifyContent: "center"
988
- }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
989
- title: reaction
990
- }, /*#__PURE__*/React__default['default'].createElement(ReactionButton$1, {
991
- active: bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : _bite$userReactions.reactions.includes(reaction),
992
- style: {
993
- padding: (_sizeParams = sizeParams) === null || _sizeParams === void 0 ? void 0 : _sizeParams.reactionPadding,
994
- width: (_sizeParams2 = sizeParams) === null || _sizeParams2 === void 0 ? void 0 : _sizeParams2.reactionSize,
995
- height: (_sizeParams3 = sizeParams) === null || _sizeParams3 === void 0 ? void 0 : _sizeParams3.reactionSize
996
- },
997
- onClick: function onClick() {
998
- var _bite$userReactions2;
999
-
1000
- var isRemove = bite === null || bite === void 0 ? void 0 : (_bite$userReactions2 = bite.userReactions) === null || _bite$userReactions2 === void 0 ? void 0 : _bite$userReactions2.reactions.includes(reaction);
1001
- handleClickReaction(reaction, isRemove);
1002
- setOpenSave(false);
1003
- }
1004
- }, /*#__PURE__*/React__default['default'].createElement("img", {
1005
- alt: "reaction-".concat(reaction),
1006
- width: "100%",
1007
- height: "100%",
1008
- src: reactionIconUrls$1[reaction]
1009
- }))));
1010
- })), /*#__PURE__*/React__default['default'].createElement(Stack, {
1011
- justifyContent: "space-around",
1012
- alignItems: "center",
1013
- direction: "row",
1014
- width: "100%"
1015
- }, /*#__PURE__*/React__default['default'].createElement(Button, {
1016
- variant: "contained",
1017
- color: "seafoam",
1018
- size: sizeParams.buttonSize,
1019
- onClick: function onClick() {
1020
- return setOpenSave(false);
1021
- }
1022
- }, "DONE"), unsaveButton ? unsaveButton : /*#__PURE__*/React__default['default'].createElement(Button, {
1023
- onClick: function onClick() {
1024
- handleClickUnsave();
1025
- setOpenSave(false);
1026
- },
1027
- variant: "outlined",
1028
- color: "whiteOverride",
1029
- sx: {
1030
- ".MuiButton-startIcon": {
1031
- margin: "0"
1032
- }
1033
- },
1034
- size: sizeParams.buttonSize,
1035
- startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
1036
- sx: {
1037
- color: "white.override",
1038
- margin: "0"
1039
- }
1040
- })
1041
- }, "UNSAVE")))));
1042
- };
1043
- Blerp$1.propTypes = {
1044
- bite: PropTypes__default['default'].object.isRequired,
1045
- collections: PropTypes__default['default'].array,
1046
- variantSize: PropTypes__default['default'].string,
1047
- userSignedIn: PropTypes__default['default'].object,
1048
- unsaveButton: PropTypes__default['default'].object,
1049
- isSelected: PropTypes__default['default'].bool.isRequired,
1050
- playingState: PropTypes__default['default'].string.isRequired,
1051
- primaryActionButton: PropTypes__default['default'].object,
1052
- secondaryActionButton: PropTypes__default['default'].object,
1053
- getUserReactions: PropTypes__default['default'].func.isRequired,
1054
- createCollection: PropTypes__default['default'].func,
1055
- handleClickBackground: PropTypes__default['default'].func.isRequired,
1056
- handleClickPlay: PropTypes__default['default'].func.isRequired,
1057
- handleClickThreeDot: PropTypes__default['default'].func.isRequired,
1058
- handleClickSave: PropTypes__default['default'].func.isRequired,
1059
- handleClickReaction: PropTypes__default['default'].func.isRequired,
1060
- handleClickUnsave: PropTypes__default['default'].func.isRequired,
1061
- handleClickTitle: PropTypes__default['default'].func.isRequired
1062
- };
1063
-
1064
- var _templateObject$8, _templateObject2$6, _templateObject3$5, _templateObject4$3, _templateObject5$1, _templateObject6$1, _templateObject7$1;
1065
- // _id: "5b237fbafca7167a35619410",
1066
- // title: "Crying",
1067
- // image: {
1068
- // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
1069
- // original: {
1070
- // url:
1071
- // "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
1072
- // },
1073
- // },
1074
- // audio: {
1075
- // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
1076
- // original: {
1077
- // url:
1078
- // "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
1079
- // },
1080
- // },
1081
- // };
1082
-
1083
- var BlerpImage = styled__default['default'].div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
1084
- return props.url;
1085
- });
1086
- var zoomIn = styled.keyframes(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
1087
- styled__default['default'].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default'](["\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 8px;\n transform: scale(0);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: ", "D3;\n border: 2px solid ", "D3;\n backdrop-filter: blur(4px);\n animation: ", " 0.2s forwards;\n"])), function (props) {
1088
- return props.theme.colors.notBlack;
1089
- }, function (props) {
1090
- return props.theme.colors.notBlack;
1091
- }, zoomIn);
1092
- var SaveContainer = styled__default['default'].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n"])), function (props) {
1093
- return props.theme.colors.white;
1094
- });
1095
- var BlerpImageScrim = styled__default['default'].div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
1096
- return props.theme.colors.notBlackOverride;
1097
- }, function (props) {
1098
- return props.theme.colors.notBlack;
1099
- }, SaveContainer);
1100
- styled__default['default'].div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral__default['default'](["\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n transition: 0.2s;\n margin-right: 0;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
1101
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
1102
- }, function (props) {
1103
- return props.theme.colors.ibisRed;
1104
- });
1105
- styled__default['default'].div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
1106
- var BlerpListView$1 = function BlerpListView(_ref) {
1107
- var _bite$image, _bite$image$original, _theme$colors, _bite$image2, _bite$image2$original;
1108
-
1109
- var bite = _ref.bite,
1110
- variantSize = _ref.variantSize;
1111
- _ref.isSelected;
1112
- var playingState = _ref.playingState,
1113
- extraInfoComponent = _ref.extraInfoComponent,
1114
- primaryActionButton = _ref.primaryActionButton,
1115
- secondaryActionButton = _ref.secondaryActionButton,
1116
- handleClickBackground = _ref.handleClickBackground,
1117
- handleClickPlay = _ref.handleClickPlay,
1118
- handleClickSave = _ref.handleClickSave,
1119
- handleClickThreeDot = _ref.handleClickThreeDot,
1120
- handleClickUnsave = _ref.handleClickUnsave,
1121
- handleClickTitle = _ref.handleClickTitle,
1122
- isLinkTitle = _ref.isLinkTitle,
1123
- fluid = _ref.fluid;
1124
- _ref.props;
1125
-
1126
- var _useState = React.useState(false),
1127
- _useState2 = _slicedToArray__default['default'](_useState, 2);
1128
- _useState2[0];
1129
- var setOpenSave = _useState2[1];
1130
-
1131
- var _usePalette = reactPalette.usePalette(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url);
1132
- _usePalette.loading;
1133
- var data = _usePalette.data;
1134
- _usePalette.error;
1135
-
1136
- var theme = React.useContext(styled.ThemeContext);
1137
- var size = useWindowSize();
1138
-
1139
- var sizeParams;
1140
- var smallSize = {
1141
- width: 300,
1142
- height: 40,
1143
- fontSize: "16px",
1144
- imageSize: "40px",
1145
- reactionSpacing: 1,
1146
- reactionPadding: "3px",
1147
- reactionSize: "20px",
1148
- buttonSize: "small"
1149
- };
1150
- var meduimSize = {
1151
- width: 375,
1152
- height: 48,
1153
- fontSize: "18px",
1154
- imageSize: "48px",
1155
- reactionSpacing: 1,
1156
- reactionPadding: "3px",
1157
- reactionSize: "23px",
1158
- buttonSize: "medium"
1159
- };
1160
- var largeSize = {
1161
- width: 440,
1162
- height: 56,
1163
- fontSize: "20px",
1164
- imageSize: "56px",
1165
- reactionSpacing: 1,
1166
- reactionPadding: "5px",
1167
- reactionSize: "30px",
1168
- buttonFontSize: "large"
1169
- };
1170
-
1171
- if (!variantSize) {
1172
- if (fluid) {
1173
- sizeParams = {
1174
- width: "100%",
1175
- height: 40,
1176
- fontSize: "18px",
1177
- imageSize: "48px",
1178
- reactionSpacing: 1,
1179
- reactionPadding: "3px",
1180
- reactionSize: "23px",
1181
- buttonSize: "medium"
1182
- };
1183
- } else if (size.width <= 400) {
1184
- sizeParams = smallSize;
1185
- } else if (size.width <= 900) {
1186
- sizeParams = meduimSize;
1187
- } else if (size.width > 900) {
1188
- sizeParams = largeSize;
1189
- }
1190
- } else {
1191
- if (variantSize === "small") {
1192
- sizeParams = smallSize;
1193
- } else if (variantSize === "medium") {
1194
- sizeParams = meduimSize;
1195
- } else if (variantSize === "large") {
1196
- sizeParams = largeSize;
1197
- }
1198
- }
1199
-
1200
- return /*#__PURE__*/React__default['default'].createElement(Box, {
1201
- sx: {
1202
- width: sizeParams.width,
1203
- minWidth: fluid && "300px",
1204
- borderRadius: "8px",
1205
- border: "2px transparent",
1206
- backgroundImage: "linear-gradient(to right, ".concat(data !== null && data !== void 0 && data.muted ? data === null || data === void 0 ? void 0 : data.muted : theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.grey5, ", ").concat(theme.colors.grey5, ")"),
1207
- backgroundOrigin: "border-box",
1208
- backgroundClip: "content-box, border-box",
1209
- "&:hover": {
1210
- transition: "0.3s",
1211
- bgcolor: "grey2.main",
1212
- boxShadow: "0px 0px 20px #000000c1;"
1213
- }
1214
- }
1215
- }, /*#__PURE__*/React__default['default'].createElement(Box, {
1216
- onClick: function onClick(e) {
1217
- e.stopPropagation();
1218
- handleClickBackground();
1219
- },
1220
- sx: {
1221
- width: "calc(100% - 4px)",
1222
- height: sizeParams.height,
1223
- display: "flex",
1224
- flexDirection: "row",
1225
- alignItems: "center",
1226
- justifyContent: "space-between",
1227
- borderRadius: "8px",
1228
- border: "2px solid transparent",
1229
- borderRightWidth: "0px",
1230
- borderLeftWidth: "0px",
1231
- margin: "0 auto",
1232
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
1233
- transition: "0.3s",
1234
- position: "relative"
1235
- }
1236
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1237
- direction: "row",
1238
- width: "70%",
1239
- alignItems: "center",
1240
- sx: {
1241
- cursor: "pointer"
1242
- }
1243
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
1244
- style: {
1245
- width: sizeParams.imageSize,
1246
- height: sizeParams.imageSize
1247
- },
1248
- url: bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url
1249
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
1250
- style: {
1251
- width: sizeParams.imageSize,
1252
- height: sizeParams.imageSize
1253
- },
1254
- onClick: function onClick(e) {
1255
- if (handleClickPlay) {
1256
- e.stopPropagation();
1257
- handleClickPlay();
1258
- }
1259
- }
1260
- }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
1261
- sx: {
1262
- width: "30px",
1263
- height: "30px",
1264
- color: "white.override"
1265
- }
1266
- }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
1267
- sx: {
1268
- width: "30px",
1269
- height: "30px",
1270
- color: "white.override"
1271
- }
1272
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
1273
- textAlign: "left",
1274
- fontSize: sizeParams.fontSize,
1275
- noWrap: true,
1276
- width: "80%",
1277
- marginLeft: "10px",
1278
- color: "white.override",
1279
- sx: {
1280
- ":hover": {
1281
- textDecoration: handleClickTitle ? "underline" : "none"
1282
- }
1283
- },
1284
- onClick: function onClick(e) {
1285
- if (handleClickTitle) {
1286
- e.stopPropagation();
1287
- handleClickTitle();
1288
- }
1289
- }
1290
- }, /*#__PURE__*/React__default['default'].createElement("a", {
1291
- href: "/soundbites/".concat(bite._id),
1292
- style: {
1293
- textDecoration: "none",
1294
- color: "white"
1295
- }
1296
- }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1297
- textAlign: "left",
1298
- fontSize: sizeParams.fontSize,
1299
- noWrap: true,
1300
- width: "80%",
1301
- marginLeft: "10px",
1302
- color: "white.override",
1303
- sx: {
1304
- ":hover": {
1305
- textDecoration: handleClickTitle ? "underline" : "none"
1306
- }
1307
- },
1308
- onClick: function onClick(e) {
1309
- if (handleClickTitle) {
1310
- e.stopPropagation();
1311
- handleClickTitle();
1312
- }
1313
- }
1314
- }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1315
- direction: "row"
1316
- }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
1317
- onClick: function onClick(e) {
1318
- e.stopPropagation();
1319
- handleClickUnsave();
1320
- setOpenSave(true);
1321
- },
1322
- sx: {
1323
- backgroundColor: "white.override",
1324
- padding: "5px",
1325
- marginRight: "10px",
1326
- ":hover": {
1327
- backgroundColor: "grey3.main"
1328
- }
1329
- }
1330
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1331
- sx: {
1332
- color: "notBlack.override"
1333
- }
1334
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
1335
- onClick: function onClick(e) {
1336
- e.stopPropagation();
1337
- handleClickSave();
1338
- setOpenSave(true);
1339
- },
1340
- sx: {
1341
- backgroundColor: "white.override",
1342
- padding: "5px",
1343
- marginRight: "10px",
1344
- ":hover": {
1345
- backgroundColor: "grey3.main"
1346
- }
1347
- }
1348
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1349
- sx: {
1350
- color: "notBlack.override"
1351
- }
1352
- })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1353
- onClick: function onClick(e) {
1354
- handleClickThreeDot(e);
1355
- },
1356
- sx: {
1357
- backgroundColor: "white.override",
1358
- padding: "5px",
1359
- marginRight: "10px",
1360
- ":hover": {
1361
- backgroundColor: "grey3.main"
1362
- }
1363
- }
1364
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
1365
- sx: {
1366
- color: "notBlack.override"
1367
- }
1368
- })))), extraInfoComponent && extraInfoComponent);
1369
- };
1370
- BlerpListView$1.propTypes = {
1371
- bite: PropTypes__default['default'].object.isRequired,
1372
- collections: PropTypes__default['default'].array.isRequired,
1373
- variantSize: PropTypes__default['default'].string.isRequired,
1374
- userSignedIn: PropTypes__default['default'].object.isRequired,
1375
- isSelected: PropTypes__default['default'].bool.isRequired,
1376
- playingState: PropTypes__default['default'].string.isRequired,
1377
- actionButton: PropTypes__default['default'].object,
1378
- getUserReactions: PropTypes__default['default'].func.isRequired,
1379
- createCollection: PropTypes__default['default'].func.isRequired,
1380
- handleClickBackground: PropTypes__default['default'].func.isRequired,
1381
- handleClickPlay: PropTypes__default['default'].func.isRequired,
1382
- handleClickThreeDot: PropTypes__default['default'].func.isRequired,
1383
- handleClickSave: PropTypes__default['default'].func.isRequired,
1384
- handleClickReaction: PropTypes__default['default'].func.isRequired,
1385
- handleClickUnsave: PropTypes__default['default'].func.isRequired
1386
- };
1387
-
1388
- function ownKeys$4(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; }
1389
-
1390
- function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(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$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
1391
-
1392
- var colors = {
1393
- white: "#ffffff",
1394
- waxing: "#F3F3F3",
1395
- waxwing: "#F3F3F3",
1396
- grey2: "#E6E6E6",
1397
- grey3: "#C4C4C4",
1398
- grey4: "#939393",
1399
- grey5: "#6F6F6F",
1400
- grey6: "#444444",
1401
- grey7: "#252525",
1402
- notBlack: "#121212",
1403
- black: "#000000",
1404
- discordGrey: "#2C3034",
1405
- secondaryButtonDarkGrey: "#21000C",
1406
- secondaryButtonGrey: "#8A8587",
1407
- thirdButtonGrey: "#BEBEBC",
1408
- ibisRed: "#FE295C",
1409
- starling: "#3507B4",
1410
- seafoam: "#0FEBC5",
1411
- buntingBlue: "#27AAFF",
1412
- popnYellow: "#FFD400"
1413
- };
1414
- var overrideColors = {
1415
- whiteOverride: colors.white,
1416
- waxwingOverride: colors.waxwing,
1417
- grey2Override: colors.grey2,
1418
- grey3Override: colors.grey3,
1419
- grey4Override: colors.grey4,
1420
- grey5Override: colors.grey5,
1421
- grey6Override: colors.grey6,
1422
- grey7Override: colors.grey7,
1423
- notBlackOverride: colors.notBlack,
1424
- blackOverride: colors.black,
1425
- discordGreyOverride: colors.discordGrey,
1426
- secondaryButtonDarkGreyOverride: colors.secondaryButtonDarkGrey,
1427
- secondaryButtonGreyOverride: colors.secondaryButtonGrey,
1428
- thirdButtonGreyOverride: colors.thirdButtonGrey,
1429
- ibisRedOverride: colors.ibisRed,
1430
- starlingOverride: colors.starling,
1431
- seafoamOverride: colors.seafoam,
1432
- buntingBlueOverride: colors.buntingBlue,
1433
- popnYellowOverride: colors.popnYellow
1434
- };
1435
- var lightColors = _objectSpread$4(_objectSpread$4({}, colors), overrideColors);
1436
- var darkColors = _objectSpread$4({
1437
- white: colors.black,
1438
- waxwing: colors.notBlack,
1439
- grey2: colors.grey7,
1440
- grey3: colors.grey6,
1441
- grey4: colors.grey5,
1442
- grey5: colors.grey4,
1443
- grey6: colors.grey3,
1444
- grey7: colors.grey2,
1445
- notBlack: colors.waxwing,
1446
- notBlackOverride: colors.white,
1447
- secondaryButtonDarkGrey: colors.secondaryButtonGrey,
1448
- secondaryButtonGrey: colors.secondaryButtonGrey,
1449
- thirdButtonGrey: colors.thirdButtonGrey,
1450
- ibisRed: colors.ibisRed,
1451
- starling: colors.starling,
1452
- seafoam: colors.seafoam,
1453
- buntingBlue: colors.buntingBlue,
1454
- popnYellow: colors.popnYellow
1455
- }, overrideColors);
1456
- var lightPalette = {
1457
- primary: {
1458
- light: colors.ibisRed,
1459
- main: colors.ibisRed,
1460
- dark: "#DB0F3F",
1461
- contrastText: "#fff"
1462
- },
1463
- secondary: {
1464
- light: colors.notBlack,
1465
- main: colors.notBlack,
1466
- dark: colors.notBlack,
1467
- contrastText: "#000"
1468
- },
1469
- whiteOverride: {
1470
- light: colors.white,
1471
- main: colors.white,
1472
- dark: colors.white,
1473
- override: colors.white,
1474
- contrastText: "#fff"
1475
- },
1476
- white: {
1477
- light: colors.white,
1478
- main: colors.white,
1479
- dark: colors.white,
1480
- override: colors.white,
1481
- contrastText: "#fff"
1482
- },
1483
- neutral: {
1484
- main: "#64748B",
1485
- contrastText: "#fff"
1486
- },
1487
- waxwing: {
1488
- main: colors.waxing
1489
- },
1490
- grey2: {
1491
- main: colors.grey2
1492
- },
1493
- grey3: {
1494
- main: colors.grey3
1495
- },
1496
- grey4: {
1497
- main: colors.grey4
1498
- },
1499
- grey5: {
1500
- main: colors.grey5
1501
- },
1502
- grey6: {
1503
- main: colors.grey6
1504
- },
1505
- grey7: {
1506
- main: colors.grey7
1507
- },
1508
- notBlack: {
1509
- light: colors.notBlack,
1510
- main: colors.notBlack,
1511
- dark: colors.notBlack,
1512
- override: colors.notBlack,
1513
- contrastText: "#fff"
1514
- },
1515
- ibisRed: {
1516
- main: colors.ibisRed,
1517
- dark: "#DB0F3F"
1518
- },
1519
- seafoam: {
1520
- light: colors.seafoam,
1521
- main: colors.seafoam,
1522
- dark: colors.seafoam,
1523
- contrastText: "#fff"
1524
- },
1525
- buntingBlue: {
1526
- main: colors.buntingBlue
1527
- },
1528
- starling: {
1529
- light: colors.starling,
1530
- main: colors.starling,
1531
- dark: colors.starling,
1532
- contrastText: "#fff"
1533
- },
1534
- popnYellow: {
1535
- main: colors.popnYellow
1536
- }
1537
- };
1538
- var darkPalette = {
1539
- primary: {
1540
- light: colors.ibisRed,
1541
- main: colors.ibisRed,
1542
- dark: colors.ibisRed,
1543
- contrastText: "#fff"
1544
- },
1545
- secondary: {
1546
- light: colors.notBlack,
1547
- main: colors.notBlack,
1548
- dark: colors.notBlack,
1549
- contrastText: "#000"
1550
- },
1551
- whiteOverride: {
1552
- light: colors.white,
1553
- main: colors.white,
1554
- dark: colors.white,
1555
- override: colors.white,
1556
- contrastText: "#fff"
1557
- },
1558
- white: {
1559
- light: "#000000",
1560
- main: "#000000",
1561
- dark: "#000000",
1562
- override: colors.white,
1563
- contrastText: "#fff"
1564
- },
1565
- neutral: {
1566
- main: "#64748B",
1567
- contrastText: "#fff"
1568
- },
1569
- waxwing: {
1570
- main: colors.notBlack
1571
- },
1572
- grey2: {
1573
- main: colors.grey7
1574
- },
1575
- grey3: {
1576
- main: colors.grey6
1577
- },
1578
- grey4: {
1579
- main: colors.grey5
1580
- },
1581
- grey5: {
1582
- main: colors.grey4
1583
- },
1584
- grey6: {
1585
- main: colors.grey3
1586
- },
1587
- grey7: {
1588
- main: colors.grey2
1589
- },
1590
- notBlack: {
1591
- light: colors.waxwing,
1592
- main: colors.waxwing,
1593
- dark: colors.waxwing,
1594
- override: colors.notBlack,
1595
- contrastText: "#000"
1596
- },
1597
- black: {
1598
- main: "#ffffff",
1599
- contrastText: "#000"
1600
- },
1601
- ibisRed: {
1602
- main: colors.ibisRed
1603
- },
1604
- seafoam: {
1605
- light: colors.seafoam,
1606
- main: colors.seafoam,
1607
- dark: colors.seafoam,
1608
- contrastText: "#fff"
1609
- },
1610
- buntingBlue: {
1611
- main: colors.buntingBlue
1612
- },
1613
- starling: {
1614
- light: colors.starling,
1615
- main: colors.starling,
1616
- dark: colors.starling,
1617
- contrastText: "#fff"
1618
- },
1619
- popnYellow: {
1620
- main: colors.popnYellow
1621
- }
1622
- };
1623
-
1624
- var _templateObject$7, _templateObject2$5, _templateObject3$4, _templateObject4$2;
1625
-
1626
- function ownKeys$3(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; }
1627
-
1628
- function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(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$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
1629
-
1630
- var motion1 = function motion1(props) {
1631
- return styled.keyframes(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n"])));
1632
- };
1633
-
1634
- var motion2 = function motion2(props) {
1635
- return styled.keyframes(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(19px, 0);\n }\n"])));
1636
- };
1637
-
1638
- var motion3 = function motion3(props) {
1639
- return styled.keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
1640
- };
1641
-
1642
- var EllipsisSpinner = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: ", ";\n height: ", ";\n div {\n position: absolute;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: ", ";\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n }\n div:nth-child(1) {\n left: 6px;\n animation: ", " 0.6s infinite;\n }\n div:nth-child(2) {\n left: 6px;\n animation: ", " 0.6s infinite;\n }\n div:nth-child(3) {\n left: 26px;\n animation: ", " 0.6s infinite;\n }\n div:nth-child(4) {\n left: 45px;\n animation: ", " 0.6s infinite;\n }\n"])), function (p) {
1643
- return "".concat(p.size).concat(p.sizeUnit);
1644
- }, function (p) {
1645
- return "".concat(p.size).concat(p.sizeUnit);
1646
- }, function (p) {
1647
- return p.color;
1648
- }, function (p) {
1649
- return motion1();
1650
- }, function (p) {
1651
- return motion2();
1652
- }, function (p) {
1653
- return motion2();
1654
- }, function (p) {
1655
- return motion3();
1656
- });
1657
- var EllipsisLoader = function EllipsisLoader(_ref) {
1658
- var color = _ref.color,
1659
- size = _ref.size,
1660
- sizeUnit = _ref.sizeUnit,
1661
- style = _ref.style;
1662
- return /*#__PURE__*/React__default['default'].createElement(EllipsisSpinner, {
1663
- color: color,
1664
- size: size,
1665
- sizeUnit: sizeUnit,
1666
- style: _objectSpread$3({}, style)
1667
- }, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
1668
- };
1669
- EllipsisLoader.defaultProps = {
1670
- size: 24,
1671
- color: colors.notBlack,
1672
- sizeUnit: "px",
1673
- style: {
1674
- width: "60px",
1675
- height: "20px"
1676
- }
1677
- };
1678
-
1679
- var _templateObject$6, _templateObject2$4, _templateObject3$3, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7;
1680
- var Slider$2 = styled__default['default'].div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 3px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 50%;\n }\n"])), function (props) {
1681
- return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
1682
- }, function (props) {
1683
- return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
1684
- });
1685
- var ToggleInput = styled__default['default'].input(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$2, function (props) {
1686
- return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
1687
- }, Slider$2, function (props) {
1688
- return props.theme.colors.seafoam;
1689
- }, Slider$2, Slider$2);
1690
- var Switch$1 = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
1691
- var BlackSlider = styled__default['default'].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
1692
- return props.theme.colors.notBlack;
1693
- });
1694
- var BlackToggleInput = styled__default['default'].input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: transparent;\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n /* -webkit-transform: translateY(2px);\n -ms-transform: translateY(2px);\n transform: translateY(2px); */\n }\n"])), BlackSlider, BlackSlider, function (props) {
1695
- return props.theme.colors.notBlack;
1696
- }, BlackSlider, BlackSlider);
1697
- styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 28px;\n height: 14px;\n border: 2px solid ", ";\n border-radius: 14px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
1698
- return props.theme.colors.notBlack;
1699
- }, BlackToggleInput);
1700
- var LoadingContainer = styled__default['default'].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default['default'](["\n width: 50px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
1701
- var Toggle$1 = function Toggle(_ref) {
1702
- var loading = _ref.loading,
1703
- checked = _ref.checked,
1704
- _onClick = _ref.onClick;
1705
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
1706
- checked: checked,
1707
- onClick: function onClick() {
1708
- return _onClick();
1709
- }
1710
- }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
1711
- checked: checked,
1712
- onChange: function onChange() {
1713
- return null;
1714
- },
1715
- type: "checkbox"
1716
- }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
1717
- };
1718
-
1719
- function ownKeys$2(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; }
1720
-
1721
- function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(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$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
1722
- // box-shadow: 0px 0px 20px #0000001a;
1723
- // div:focus {
1724
- // border: none !important;
1725
- // box-shadow: 0px 0px 20px #0000001a;
1726
- // }
1727
- // & .MuiPaper-root {
1728
- // background-color: ${(props) => props.theme.colors.grey3};
1729
- // }
1730
- // `;
1731
-
1732
- var Dropdown$1 = function Dropdown(_ref) {
1733
- var buttonTitle = _ref.buttonTitle,
1734
- buttonLabel = _ref.buttonLabel,
1735
- buttonStyle = _ref.buttonStyle,
1736
- paperStyle = _ref.paperStyle;
1737
- _ref.buttonVariant;
1738
- var handleOptionClicked = _ref.handleOptionClicked,
1739
- startIcon = _ref.startIcon,
1740
- endIcon = _ref.endIcon,
1741
- options = _ref.options;
1742
-
1743
- var _useState = React.useState(null),
1744
- _useState2 = _slicedToArray__default['default'](_useState, 2),
1745
- anchorEl = _useState2[0],
1746
- setAnchorEl = _useState2[1];
1747
-
1748
- var open = Boolean(anchorEl);
1749
-
1750
- var handleClick = function handleClick(event) {
1751
- // console.log(options);
1752
- setAnchorEl(event.currentTarget);
1753
- };
1754
-
1755
- var handleClose = function handleClose() {
1756
- setAnchorEl(null);
1757
- };
1758
-
1759
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
1760
- onClick: function onClick(e) {
1761
- return handleClick(e);
1762
- },
1763
- variant: "contained",
1764
- color: "waxwing",
1765
- icon: true,
1766
- disableElevation: true,
1767
- sx: {
1768
- borderRadius: "4px",
1769
- color: "notBlack.main",
1770
- paddingRight: "4px",
1771
- paddingLeft: "4px"
1772
- },
1773
- style: buttonStyle
1774
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1775
- direction: "row",
1776
- justifyContent: "space-between",
1777
- alignItems: "center",
1778
- width: "100%"
1779
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1780
- direction: "row",
1781
- alignItems: "center",
1782
- overflow: "hidden",
1783
- width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
1784
- }, startIcon, /*#__PURE__*/React__default['default'].createElement(Stack, {
1785
- alignItems: "flex-start",
1786
- marginLeft: "12px"
1787
- }, buttonLabel && /*#__PURE__*/React__default['default'].createElement(Text, {
1788
- noWrap: true,
1789
- fontSize: "8px",
1790
- color: "grey4.main",
1791
- fontWeight: "light"
1792
- }, buttonLabel), /*#__PURE__*/React__default['default'].createElement(Text, {
1793
- noWrap: true,
1794
- fontSize: "14px",
1795
- color: "grey5.main",
1796
- marginRight: "16px"
1797
- }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React__default['default'].createElement(KeyboardArrowDownRoundedIcon__default['default'], {
1798
- sx: {
1799
- color: "grey5.main"
1800
- },
1801
- fontSize: "medium"
1802
- }))), /*#__PURE__*/React__default['default'].createElement(Menu, {
1803
- id: "demo-customized-menu",
1804
- MenuListProps: {
1805
- "aria-labelledby": "demo-customized-button"
1806
- },
1807
- anchorEl: anchorEl,
1808
- open: open,
1809
- onClose: handleClose,
1810
- elevation: 0,
1811
- sx: {
1812
- top: "10px"
1813
- },
1814
- anchorOrigin: {
1815
- vertical: "bottom",
1816
- horizontal: "left"
1817
- },
1818
- transformOrigin: {
1819
- vertical: "top",
1820
- horizontal: "left"
1821
- },
1822
- PaperProps: {
1823
- sx: _objectSpread$2({
1824
- "& ul": {
1825
- padding: "0"
1826
- },
1827
- width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width,
1828
- backgroundColor: "waxwing.main",
1829
- boxShadow: "0px 0px 20px #0000001a;"
1830
- }, paperStyle)
1831
- }
1832
- }, options === null || options === void 0 ? void 0 : options.map(function (option) {
1833
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, {
1834
- key: "dropdown-".concat(option.name),
1835
- selected: buttonTitle === option.name,
1836
- sx: {
1837
- borderRadius: "4px",
1838
- "&.Mui-selected": {
1839
- color: "white.main",
1840
- backgroundColor: "ibisRed.main"
1841
- },
1842
- ":hover": {
1843
- color: "white.main",
1844
- backgroundColor: "ibisRed.main"
1845
- },
1846
- "&.Mui-selected:hover": {
1847
- color: "white.main",
1848
- backgroundColor: "ibisRed.main"
1849
- }
1850
- },
1851
- onClick: function onClick() {
1852
- handleOptionClicked(option);
1853
- handleClose();
1854
- }
1855
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
1856
- noWrap: true
1857
- }, option.name));
1858
- })));
1859
- };
1860
-
1861
- var _templateObject$5, _templateObject2$3, _templateObject3$2;
1862
- var Slider$1 = styled__default['default'].input(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral__default['default'](["\n -webkit-appearance: none;\n align-self: center;\n width: 80%;\n height: 5px;\n border-radius: 5px;\n background: #d3d3d3;\n outline: none;\n opacity: 0.7;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n\n &:focus {\n border: 0px !important;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 25px;\n height: 25px;\n border-radius: 50%;\n background: ", ";\n border: 2px solid ", ";\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n width: 25px;\n height: 25px;\n border-radius: 50%;\n background: ", ";\n border: 2px solid ", ";\n cursor: pointer;\n }\n"])), function (props) {
1863
- return props.theme.colors.ibisRed;
1864
- }, function (props) {
1865
- return props.theme.colors.waxwing;
1866
- }, function (props) {
1867
- return props.theme.colors.ibisRed;
1868
- }, function (props) {
1869
- return props.theme.colors.waxwing;
1870
- });
1871
- styled__default['default'].div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral__default['default'](["\n background-image: url(\"https://storage.googleapis.com/blerp_products/Twitch/Assets/Close_Black.svg?folder=true&organizationId=true\");\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n width: 15px;\n height: 15px;\n position: absolute;\n top: 20px;\n right: 20px;\n cursor: pointer;\n"])));
1872
- var ZoomIcon = styled__default['default'].div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral__default['default'](["\n background-image: url(\"https://storage.googleapis.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n background-repeat: no-repeat;\n background-position: left;\n background-size: cover;\n width: 20px;\n height: 20px;\n"])));
1873
-
1874
- var ImageUploadModal = function ImageUploadModal(_ref) {
1875
- var _ref6;
1876
-
1877
- var prevImage = _ref.prevImage,
1878
- updateImage = _ref.updateImage,
1879
- onClose = _ref.onClose,
1880
- title = _ref.title,
1881
- isCircularImage = _ref.isCircularImage,
1882
- isSquareImage = _ref.isSquareImage,
1883
- sizeInfo = _ref.sizeInfo;
1884
-
1885
- var _useState = React.useState(prevImage),
1886
- _useState2 = _slicedToArray__default['default'](_useState, 2),
1887
- image = _useState2[0],
1888
- setImage = _useState2[1];
1889
-
1890
- var _useState3 = React.useState(50),
1891
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
1892
- zoom = _useState4[0],
1893
- setZoom = _useState4[1];
1894
-
1895
- var _useState5 = React.useState(false),
1896
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
1897
- loading = _useState6[0],
1898
- setLoading = _useState6[1];
1899
-
1900
- var _useState7 = React.useState(false),
1901
- _useState8 = _slicedToArray__default['default'](_useState7, 2),
1902
- dropzoneHovered = _useState8[0],
1903
- setDropzoneHovered = _useState8[1];
1904
-
1905
- var size = useWindowSize();
1906
-
1907
- var urlToObject = /*#__PURE__*/function () {
1908
- var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(img) {
1909
- var response, blob, file;
1910
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
1911
- while (1) {
1912
- switch (_context.prev = _context.next) {
1913
- case 0:
1914
- _context.next = 2;
1915
- return fetch(img);
1916
-
1917
- case 2:
1918
- response = _context.sent;
1919
- _context.next = 5;
1920
- return response.blob();
1921
-
1922
- case 5:
1923
- blob = _context.sent;
1924
- file = new File([blob], img, {
1925
- type: blob.type
1926
- });
1927
- setImage(file);
1928
-
1929
- case 8:
1930
- case "end":
1931
- return _context.stop();
1932
- }
1933
- }
1934
- }, _callee);
1935
- }));
1936
-
1937
- return function urlToObject(_x) {
1938
- return _ref2.apply(this, arguments);
1939
- };
1940
- }();
1941
-
1942
- React.useEffect(function () {
1943
- if (prevImage) {
1944
- urlToObject(prevImage);
1945
- }
1946
- }, [prevImage]);
1947
- var imageEditorRef = /*#__PURE__*/React.createRef();
1948
-
1949
- var handleImageDrop = function handleImageDrop(acceptedFiles) {
1950
- if (acceptedFiles[0].type === "image/gif") {
1951
- console.log("hit dat GIF in IF");
1952
- }
1953
-
1954
- setImage(acceptedFiles[0]);
1955
- setDropzoneHovered(false);
1956
- };
1957
-
1958
- var handleGifUpload = /*#__PURE__*/function () {
1959
- var _ref3 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
1960
- return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
1961
- while (1) {
1962
- switch (_context2.prev = _context2.next) {
1963
- case 0:
1964
- if (image.name !== prevImage) {
1965
- console.log("does not equal");
1966
- updateImage(image);
1967
- }
1968
-
1969
- onClose();
1970
-
1971
- case 2:
1972
- case "end":
1973
- return _context2.stop();
1974
- }
1975
- }
1976
- }, _callee2);
1977
- }));
1978
-
1979
- return function handleGifUpload() {
1980
- return _ref3.apply(this, arguments);
1981
- };
1982
- }(); // This is called when there is a non-gif photo ready to be uploaded
1983
-
1984
-
1985
- var handleUploadClick = /*#__PURE__*/function () {
1986
- var _ref4 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3() {
1987
- var canvas, file;
1988
- return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
1989
- while (1) {
1990
- switch (_context3.prev = _context3.next) {
1991
- case 0:
1992
- if (image) {
1993
- _context3.next = 3;
1994
- break;
1995
- }
1996
-
1997
- alert("You must upload a valid image");
1998
- return _context3.abrupt("return");
1999
-
2000
- case 3:
2001
- if (!(image.size > 8842038)) {
2002
- _context3.next = 6;
2003
- break;
2004
- }
2005
-
2006
- alert("You must update with a valid image less then 7mb");
2007
- return _context3.abrupt("return");
2008
-
2009
- case 6:
2010
- // create a dom element for the photo and creates a data URL (URI)
2011
- setLoading(true);
2012
- canvas = imageEditorRef.current.getImage().toDataURL();
2013
- _context3.next = 10;
2014
- return fetch(canvas) // canvas res is the URL data of the photo. Now the .blob() method reads that data URL (URI), and creates a new Blob (file-like object of immutable data)
2015
- . // canvas res is the URL data of the photo. Now the .blob() method reads that data URL (URI), and creates a new Blob (file-like object of immutable data)
2016
- then(function (res) {
2017
- return res.blob();
2018
- }).then(function (blob) {
2019
- // assign the blob data to the DOM STRING of the DOM element
2020
- window.URL.createObjectURL(blob); // create an image file using the data from the blob, assign the file a name, assign the file type
2021
- // Adding ".JPG" is totally janky, but since the database currently reads the file type from the name of the file (not the image.type), and since we are changing the image.name to match the url of the image, an error will be thrown if we do not declare a file type at the end.
2022
-
2023
- // create an image file using the data from the blob, assign the file a name, assign the file type
2024
- // Adding ".JPG" is totally janky, but since the database currently reads the file type from the name of the file (not the image.type), and since we are changing the image.name to match the url of the image, an error will be thrown if we do not declare a file type at the end.
2025
- file = new File([blob], image.name + ".JPG", {
2026
- type: image.type
2027
- });
2028
- });
2029
-
2030
- case 10:
2031
- _context3.next = 12;
2032
- return updateImage(file);
2033
-
2034
- case 12:
2035
- setLoading(false);
2036
- onClose();
2037
-
2038
- case 14:
2039
- case "end":
2040
- return _context3.stop();
2041
- }
2042
- }
2043
- }, _callee3);
2044
- }));
2045
-
2046
- return function handleUploadClick() {
2047
- return _ref4.apply(this, arguments);
2048
- };
2049
- }();
2050
-
2051
- return /*#__PURE__*/React__default['default'].createElement(Stack, {
2052
- sx: {
2053
- minHeight: "580px"
2054
- },
2055
- alignItems: "center",
2056
- justifyContent: "space-between"
2057
- }, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
2058
- sx: {
2059
- position: "absolute",
2060
- cursor: "pointer",
2061
- top: "20px",
2062
- right: "20px"
2063
- },
2064
- onClick: function onClick() {
2065
- return onClose();
2066
- }
2067
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
2068
- alignItems: "center",
2069
- sx: {
2070
- position: "relative"
2071
- }
2072
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2073
- sx: {
2074
- fontSize: "32px",
2075
- marginbottom: "16px"
2076
- }
2077
- }, title), /*#__PURE__*/React__default['default'].createElement(Text, {
2078
- color: "grey4",
2079
- sx: {
2080
- fontWeight: "lighter",
2081
- marginBottom: "2px"
2082
- }
2083
- }, "Adjust your image below."), /*#__PURE__*/React__default['default'].createElement(Text, {
2084
- color: "grey4",
2085
- sx: {
2086
- fontWeight: "lighter",
2087
- marginBottom: "2px"
2088
- }
2089
- }, sizeInfo)), loading ? /*#__PURE__*/React__default['default'].createElement("div", {
2090
- style: {
2091
- width: "100%",
2092
- height: "300px"
2093
- }
2094
- }, /*#__PURE__*/React__default['default'].createElement(Text, null, "Loading...")) : /*#__PURE__*/React__default['default'].createElement(Stack, {
2095
- sx: {
2096
- minWidth: "300px",
2097
- margin: "0px 0",
2098
- position: "relative",
2099
- backgroundColor: "waxwing.main",
2100
- maxHeight: "250px",
2101
- overflow: "hidden",
2102
- justifyContent: "center",
2103
- alignItems: "center"
2104
- }
2105
- }, image ? image.type !== "image/gif" ? isCircularImage ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
2106
- ref: imageEditorRef,
2107
- width: 250,
2108
- height: 250,
2109
- borderRadius: 125,
2110
- image: image,
2111
- scale: zoom / 50,
2112
- crossOrigin: "anonymous"
2113
- })) : isSquareImage ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
2114
- ref: imageEditorRef,
2115
- width: 250,
2116
- height: 250,
2117
- borderRadius: 0,
2118
- image: image,
2119
- scale: zoom / 50,
2120
- crossOrigin: "anonymous"
2121
- })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
2122
- ref: imageEditorRef,
2123
- width: 650,
2124
- height: 225,
2125
- image: image,
2126
- scale: zoom / 50,
2127
- crossorigin: "anonymous"
2128
- })) : /*#__PURE__*/React__default['default'].createElement("img", {
2129
- src: URL.createObjectURL(image) || image.name,
2130
- width: "250px",
2131
- height: "auto",
2132
- style: {
2133
- alignSelf: "center"
2134
- }
2135
- }) : /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
2136
- onDragEnter: function onDragEnter() {
2137
- return setDropzoneHovered(true);
2138
- },
2139
- onDragLeave: function onDragLeave() {
2140
- return setDropzoneHovered(false);
2141
- },
2142
- onDrop: function onDrop(acceptedFiles) {
2143
- return handleImageDrop(acceptedFiles);
2144
- }
2145
- }, function (_ref5) {
2146
- var getRootProps = _ref5.getRootProps,
2147
- getInputProps = _ref5.getInputProps;
2148
- return /*#__PURE__*/React__default['default'].createElement(Stack, {
2149
- sx: {
2150
- width: "100%",
2151
- height: size.width > 600 ? "300px" : "200px",
2152
- cursor: "pointer",
2153
- box: "borderBox",
2154
- justifyContent: "center"
2155
- }
2156
- }, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
2157
- style: {
2158
- height: "100%",
2159
- display: "flex"
2160
- }
2161
- }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React__default['default'].createElement(Stack, {
2162
- color: "grey3",
2163
- style: {
2164
- justifyContent: "center",
2165
- alignItems: "center",
2166
- width: "100%"
2167
- }
2168
- }, /*#__PURE__*/React__default['default'].createElement(InsertPhotoRoundedIcon__default['default'], {
2169
- style: {
2170
- color: "white",
2171
- height: "90%",
2172
- width: "90%"
2173
- }
2174
- })) : /*#__PURE__*/React__default['default'].createElement(Text, {
2175
- sx: {
2176
- flexWrap: "wrap",
2177
- width: "80%",
2178
- alignSelf: "center",
2179
- textAlign: "center",
2180
- verticalAlign: "center",
2181
- margin: "auto"
2182
- }
2183
- }, "Click or drop image here to upload.")));
2184
- })), /*#__PURE__*/React__default['default'].createElement(Stack, {
2185
- alignItems: "center"
2186
- }, image && image.type !== "image/gif" ? /*#__PURE__*/React__default['default'].createElement(Stack, {
2187
- direction: "row",
2188
- style: {
2189
- justifyContent: "space-around"
2190
- }
2191
- }, /*#__PURE__*/React__default['default'].createElement(ZoomIcon, null), /*#__PURE__*/React__default['default'].createElement(Slider$1, {
2192
- type: "range",
2193
- min: "35",
2194
- max: "100",
2195
- value: zoom,
2196
- onChange: function onChange(e) {
2197
- return setZoom(e.target.value);
2198
- }
2199
- })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(Button, {
2200
- variant: "text",
2201
- color: "notBlack",
2202
- sx: (_ref6 = {
2203
- textDecoration: "none",
2204
- textTransform: "none",
2205
- cursor: "pointer"
2206
- }, _defineProperty__default['default'](_ref6, "textDecoration", "underline"), _defineProperty__default['default'](_ref6, "margin", "20px 0"), _ref6),
2207
- onClick: function onClick() {
2208
- return setImage(image ? null : function () {
2209
- urlToObject(prevImage);
2210
- return image;
2211
- });
2212
- }
2213
- }, image ? "Change Image" : "Cancel"), /*#__PURE__*/React__default['default'].createElement(Button, {
2214
- variant: "contained",
2215
- disableElevation: true,
2216
- onClick: function onClick() {
2217
- image.type === "image/gif" ? handleGifUpload() : handleUploadClick();
2218
- }
2219
- }, "Save Image")));
2220
- };
2221
-
2222
- var _templateObject$4;
2223
- styled__default['default'].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default']([""])));
2224
- var NewCollectionModal$1 = function NewCollectionModal(_ref) {
2225
- var _collectionToBeEdited, _collectionToBeEdited2, _collectionToBeEdited3;
2226
-
2227
- var handleCollection = _ref.handleCollection,
2228
- deleteCollection = _ref.deleteCollection,
2229
- trigger = _ref.trigger,
2230
- collectionToBeEdited = _ref.collectionToBeEdited;
2231
- _ref.children;
2232
- var isAdmin = _ref.isAdmin;
2233
-
2234
- var _useState = React.useState(false),
2235
- _useState2 = _slicedToArray__default['default'](_useState, 2),
2236
- open = _useState2[0],
2237
- setopen = _useState2[1];
2238
-
2239
- var _useState3 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited = collectionToBeEdited.image) === null || _collectionToBeEdited === void 0 ? void 0 : _collectionToBeEdited.original),
2240
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
2241
- imageFile = _useState4[0],
2242
- setImageFile = _useState4[1];
2243
-
2244
- var _useState5 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited2 = collectionToBeEdited.image) === null || _collectionToBeEdited2 === void 0 ? void 0 : (_collectionToBeEdited3 = _collectionToBeEdited2.original) === null || _collectionToBeEdited3 === void 0 ? void 0 : _collectionToBeEdited3.url),
2245
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
2246
- imageURL = _useState6[0],
2247
- setImageURL = _useState6[1];
2248
-
2249
- var _useState7 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.title),
2250
- _useState8 = _slicedToArray__default['default'](_useState7, 2),
2251
- titleInput = _useState8[0],
2252
- setTitleInput = _useState8[1];
2253
-
2254
- var _useState9 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.description),
2255
- _useState10 = _slicedToArray__default['default'](_useState9, 2),
2256
- descriptionInput = _useState10[0],
2257
- setDescriptionInput = _useState10[1];
2258
-
2259
- var _useState11 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility),
2260
- _useState12 = _slicedToArray__default['default'](_useState11, 2),
2261
- visibility = _useState12[0],
2262
- setVisibility = _useState12[1];
2263
-
2264
- var _useState13 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.price),
2265
- _useState14 = _slicedToArray__default['default'](_useState13, 2),
2266
- price = _useState14[0],
2267
- setPrice = _useState14[1];
2268
-
2269
- var triggerRef = React.useRef();
2270
-
2271
- var _useState15 = React.useState(false),
2272
- _useState16 = _slicedToArray__default['default'](_useState15, 2),
2273
- editImage = _useState16[0],
2274
- setEditImage = _useState16[1];
2275
-
2276
- var _useState17 = React.useState(false),
2277
- _useState18 = _slicedToArray__default['default'](_useState17, 2),
2278
- showDeleteModal = _useState18[0],
2279
- setShowDeleteModal = _useState18[1];
2280
-
2281
- var size = useWindowSize();
2282
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, trigger ? /*#__PURE__*/React.cloneElement(trigger, {
2283
- ref: triggerRef,
2284
- onClick: function onClick() {
2285
- return setopen(true);
2286
- }
2287
- }) : /*#__PURE__*/React__default['default'].createElement(Button, {
2288
- onClick: function onClick() {
2289
- return setopen(true);
2290
- },
2291
- color: "grey4",
2292
- sx: {
2293
- fontSize: "10px"
2294
- }
2295
- }, "Organize Collection"), /*#__PURE__*/React__default['default'].createElement(Modal, {
2296
- "aria-labelledby": "transition-modal-title",
2297
- "aria-describedby": "transition-modal-description",
2298
- open: open,
2299
- onClose: function onClose() {
2300
- return setopen(false);
2301
- },
2302
- closeAfterTransition: true
2303
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2304
- sx: {
2305
- position: "absolute",
2306
- top: "50%",
2307
- left: "50%",
2308
- transform: "translate(-50%, -50%)",
2309
- width: 600,
2310
- height: 520,
2311
- overflowY: "auto",
2312
- bgcolor: "white.main",
2313
- border: "none",
2314
- boxShadow: 24,
2315
- borderRadius: "8px",
2316
- pt: 2,
2317
- px: 6,
2318
- pb: 3,
2319
- alignItems: "center",
2320
- justifyContent: "flex-start",
2321
- "@media(max-width: 600px)": {
2322
- height: "100vh",
2323
- width: "98vw"
2324
- }
2325
- }
2326
- }, /*#__PURE__*/React__default['default'].createElement(Modal, {
2327
- sx: {
2328
- backdropFilter: "blur(8px)",
2329
- overflow: "scroll"
2330
- },
2331
- open: editImage,
2332
- onClose: function onClose() {
2333
- return setEditImage(false);
2334
- },
2335
- "aria-labelledby": "image-update-modal",
2336
- "aria-describedby": "image-update-modal"
2337
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2338
- sx: {
2339
- position: "absolute",
2340
- height: size.width > 600 ? 600 : "100%",
2341
- overflowY: "auto",
2342
- top: size.width > 600 ? "48%" : "0",
2343
- left: size.width > 600 ? "50%" : "0",
2344
- transform: size.width > 600 ? "translate(-50%, -50%)" : "0",
2345
- width: size.width > 600 ? 275 : "100vw",
2346
- minWidth: "320px",
2347
- bgcolor: "white.main",
2348
- boxShadow: 24,
2349
- borderRadius: size.width > 600 ? "8px" : "0",
2350
- p: size.width > 600 ? 4 : 0,
2351
- padding: size.width > 600 ? "16px 32px 32px" : "16px 0",
2352
- ":focus": {
2353
- border: "none",
2354
- outline: "none"
2355
- }
2356
- }
2357
- }, /*#__PURE__*/React__default['default'].createElement(ImageUploadModal, {
2358
- prevImage: collectionToBeEdited ? imageURL : undefined,
2359
- updateImage: function updateImage(newImage) {
2360
- setImageURL(URL.createObjectURL(newImage));
2361
- setImageFile(newImage);
2362
- },
2363
- width: "150px",
2364
- open: editImage,
2365
- onClose: function onClose() {
2366
- return setEditImage(false);
2367
- },
2368
- title: "Collection Image",
2369
- sizeInfo: "Minimum size is 64px X 64px",
2370
- isSquareImage: true
2371
- }))), /*#__PURE__*/React__default['default'].createElement(Modal, {
2372
- sx: {
2373
- backdropFilter: "blur(8px)"
2374
- },
2375
- open: showDeleteModal,
2376
- onClose: function onClose() {
2377
- return setShowDeleteModal(false);
2378
- },
2379
- "aria-labelledby": "delete-collection-modal",
2380
- "aria-describedby": "delete-collection-modal"
2381
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2382
- sx: {
2383
- height: "auto",
2384
- position: "absolute",
2385
- top: "48%",
2386
- left: "50%",
2387
- transform: "translate(-50%, -50%)",
2388
- bgcolor: "white.main",
2389
- boxShadow: 24,
2390
- borderRadius: "8px",
2391
- p: 4,
2392
- minWidth: "320px",
2393
- maxWidth: "500px",
2394
- padding: "16px 32px 32px",
2395
- alignItems: "center",
2396
- ":focus": {
2397
- border: "none",
2398
- outline: "none"
2399
- }
2400
- }
2401
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2402
- sx: {
2403
- textAlign: "center",
2404
- marginBottom: "16px"
2405
- }
2406
- }, "Are you sure you want to delete this collection? This action can not be reversed!"), /*#__PURE__*/React__default['default'].createElement(Stack, {
2407
- direction: "row",
2408
- sx: {
2409
- width: "100%",
2410
- justifyContent: "space-around"
2411
- }
2412
- }, /*#__PURE__*/React__default['default'].createElement(Button, {
2413
- variant: "outlined",
2414
- onClick: /*#__PURE__*/function () {
2415
- var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(e) {
2416
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
2417
- while (1) {
2418
- switch (_context.prev = _context.next) {
2419
- case 0:
2420
- e.stopPropagation();
2421
-
2422
- try {
2423
- deleteCollection({
2424
- variables: {
2425
- collectionId: collectionToBeEdited._id
2426
- }
2427
- });
2428
- setShowDeleteModal(false);
2429
- setopen(false);
2430
- } catch (err) {
2431
- console.log(err);
2432
- }
2433
-
2434
- case 2:
2435
- case "end":
2436
- return _context.stop();
2437
- }
2438
- }
2439
- }, _callee);
2440
- }));
2441
-
2442
- return function (_x) {
2443
- return _ref2.apply(this, arguments);
2444
- };
2445
- }()
2446
- }, "Yes - Trash It!"), /*#__PURE__*/React__default['default'].createElement(Button, {
2447
- variant: "outlined",
2448
- color: "seafoam",
2449
- onClick: function onClick() {
2450
- return setShowDeleteModal(false);
2451
- }
2452
- }, "No - Keep It!")))), /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
2453
- sx: {
2454
- color: "notBlack.main",
2455
- position: "absolute",
2456
- right: 10,
2457
- top: 10,
2458
- cursor: "pointer",
2459
- "@media(max-width: 600px)": {
2460
- right: 50,
2461
- top: 30
2462
- }
2463
- },
2464
- onClick: function onClick() {
2465
- return setopen(false);
2466
- }
2467
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
2468
- sx: {
2469
- minWidth: "320px"
2470
- }
2471
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2472
- sx: {
2473
- alignSelf: size.width > 600 ? "flex-start" : "center"
2474
- },
2475
- fontSize: "40px",
2476
- margin: size.width > 600 ? "9px 0" : "24px 0 9px"
2477
- }, collectionToBeEdited ? "Edit" : "New", " Collection"), /*#__PURE__*/React__default['default'].createElement(Stack, {
2478
- direction: size.width > 600 ? "row" : "column",
2479
- sx: {
2480
- width: "100%",
2481
- marginTop: "8px",
2482
- minHeight: size.width > 600 ? "272px" : "470px",
2483
- justifyContent: size.width > 600 ? "center" : "space-between"
2484
- }
2485
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2486
- alignItems: "center",
2487
- justifyContent: "flex-start",
2488
- marginRight: size.width > 600 ? size.width > 700 ? "48px" : "32px" : "0"
2489
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2490
- sx: {
2491
- width: "180px",
2492
- position: "relative",
2493
- justifyContent: "flex-start",
2494
- "&:hover": {
2495
- width: "180px",
2496
- background: "notBlack.main"
2497
- }
2498
- }
2499
- }, imageURL ? /*#__PURE__*/React__default['default'].createElement("img", {
2500
- style: {
2501
- objectFit: "cover",
2502
- width: "100%",
2503
- minWidth: "75px",
2504
- height: "auto",
2505
- borderRadius: "8px"
2506
- },
2507
- alt: "uploaded img",
2508
- src: imageURL
2509
- }) : /*#__PURE__*/React__default['default'].createElement(Stack, {
2510
- sx: {
2511
- justifyContent: "center",
2512
- width: "calc(100% - 2px)",
2513
- minWidth: "75px",
2514
- height: "176px",
2515
- borderRadius: "8px",
2516
- border: "1px solid",
2517
- color: "grey3.main"
2518
- }
2519
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2520
- sx: {
2521
- textAlign: "center"
2522
- }
2523
- }, "Click here to upload a photo for this collection")), /*#__PURE__*/React__default['default'].createElement(Stack, {
2524
- sx: {
2525
- position: "absolute",
2526
- justifyContent: "flex-end",
2527
- alignItems: "flex-end",
2528
- top: "0",
2529
- right: "0",
2530
- width: "100%",
2531
- height: "100%",
2532
- backgroundColor: "transparent",
2533
- transition: "0.2s",
2534
- "&:hover div": {
2535
- transition: "0.2s",
2536
- opacity: "1"
2537
- }
2538
- },
2539
- style: {
2540
- borderRadius: "50%",
2541
- zIndex: "6"
2542
- },
2543
- onClick: function onClick() {
2544
- return setEditImage(true);
2545
- }
2546
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2547
- alignItems: "center",
2548
- justifyContent: "center",
2549
- sx: {
2550
- opacity: "0",
2551
- position: "absolute",
2552
- top: "0",
2553
- bottom: "0",
2554
- left: "0",
2555
- right: "0",
2556
- cursor: "pointer",
2557
- width: "100%",
2558
- transition: "opacity .2s",
2559
- background: "black",
2560
- borderRadius: "8px"
2561
- }
2562
- }, /*#__PURE__*/React__default['default'].createElement(FileUploadRoundedIcon__default['default'], {
2563
- sx: {
2564
- color: "white.main",
2565
- fontSize: "40px",
2566
- height: "120px",
2567
- width: "120px"
2568
- }
2569
- }))))), /*#__PURE__*/React__default['default'].createElement(Stack, {
2570
- justifyContent: "space-between",
2571
- sx: {
2572
- // height: "220px",
2573
- width: "64%",
2574
- minWidth: "320px",
2575
- position: "relative",
2576
- top: size.width > 600 ? "-20px" : "0",
2577
- margin: "0 auto"
2578
- }
2579
- }, /*#__PURE__*/React__default['default'].createElement(Input, {
2580
- disabled: !isAdmin && visibility === "PREMIUM",
2581
- color: "notBlack",
2582
- label: "Collection Name",
2583
- value: titleInput,
2584
- onChange: function onChange(e) {
2585
- return setTitleInput(e.target.value);
2586
- },
2587
- variant: "standard",
2588
- sx: {
2589
- margin: "0"
2590
- }
2591
- }), /*#__PURE__*/React__default['default'].createElement(Input, {
2592
- disabled: !isAdmin && visibility === "PREMIUM",
2593
- label: "Add a description",
2594
- variant: "filled",
2595
- color: "notBlack",
2596
- value: descriptionInput,
2597
- onChange: function onChange(e) {
2598
- return setDescriptionInput(e.target.value);
2599
- },
2600
- multiline: true,
2601
- rows: 4,
2602
- sx: {
2603
- fontSize: "16px",
2604
- paddingBottom: "12px",
2605
- marginTop: "18px"
2606
- }
2607
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
2608
- direction: "row",
2609
- alignItems: "center",
2610
- justifyContent: "space-between"
2611
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2612
- sx: {
2613
- width: "40%"
2614
- }
2615
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2616
- marginBottom: "4px",
2617
- fontSize: "18px"
2618
- }, "Visibility:"), /*#__PURE__*/React__default['default'].createElement(Dropdown, {
2619
- sx: {
2620
- height: "40px"
2621
- },
2622
- buttonTitle: visibility,
2623
- handleOptionClicked: function handleOptionClicked(option) {
2624
- return setVisibility(option.name);
2625
- },
2626
- options: isAdmin ? [{
2627
- name: "PUBLIC"
2628
- }, {
2629
- name: "PRIVATE"
2630
- }, {
2631
- name: "UNLISTED"
2632
- }, {
2633
- name: "PREMIUM"
2634
- }] : // This is here due to the "disabled" prop not being applicable to a dropdown
2635
- visibility === "PREMIUM" ? [{
2636
- name: "PREMIUM"
2637
- }] : [{
2638
- name: "PUBLIC"
2639
- }, {
2640
- name: "PRIVATE"
2641
- }, {
2642
- name: "UNLISTED"
2643
- }]
2644
- })), visibility === "PREMIUM" ? /*#__PURE__*/React__default['default'].createElement(Stack, {
2645
- sx: {
2646
- width: "40%"
2647
- }
2648
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2649
- marginBottom: "4px",
2650
- fontSize: "18px"
2651
- }, "Price:"), /*#__PURE__*/React__default['default'].createElement(Input, {
2652
- error: !(price > 0),
2653
- size: "small",
2654
- startAdornment: "$",
2655
- variant: "standard",
2656
- color: "grey6",
2657
- value: price,
2658
- onChange: function onChange(e) {
2659
- setPrice(e.target.value);
2660
- }
2661
- })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)))), /*#__PURE__*/React__default['default'].createElement(Button, {
2662
- color: "primary",
2663
- variant: "contained",
2664
- fontSize: "32px",
2665
- sx: {
2666
- width: "40%",
2667
- minWidth: "200px",
2668
- height: "48px",
2669
- fontWeight: "16px",
2670
- margin: size.width > 600 ? "0px auto 0" : "40px auto 0"
2671
- },
2672
- disableElevation: true,
2673
- onClick: function onClick() {
2674
- // what to do if this modal is being used to edit a collection
2675
- if (collectionToBeEdited) {
2676
- if (visibility !== "PREMIUM" || visibility === "PREMIUM" && price > 0) {
2677
- handleCollection({
2678
- _id: collectionToBeEdited._id,
2679
- image: imageFile,
2680
- title: titleInput,
2681
- description: descriptionInput,
2682
- visibility: visibility,
2683
- price: price
2684
- });
2685
- setopen(false);
2686
- } else {
2687
- console.log("price must be set higher than 0");
2688
- } // what to do if this modal is being used to create a new collection
2689
-
2690
- } else {
2691
- if (visibility !== "PREMIUM" || visibility === "PREMIUM" && price > 0) {
2692
- handleCollection({
2693
- image: imageFile,
2694
- title: titleInput,
2695
- description: descriptionInput,
2696
- visibility: visibility,
2697
- price: visibility === "PREMIUM" ? price : 0
2698
- });
2699
- setopen(false);
2700
- } else {
2701
- console.log("price must be set higher than 0");
2702
- }
2703
- }
2704
- }
2705
- }, collectionToBeEdited ? "Save Changes" : "Create Collection"), /*#__PURE__*/React__default['default'].createElement(Button, {
2706
- color: "primary",
2707
- variant: "text",
2708
- fontSize: "16px",
2709
- disableElevation: true,
2710
- sx: {
2711
- margin: "10px auto"
2712
- },
2713
- onClick: function onClick() {
2714
- if (collectionToBeEdited) {
2715
- setShowDeleteModal(true);
2716
- }
2717
-
2718
- if (!collectionToBeEdited) {
2719
- setopen(false);
2720
- }
2721
- }
2722
- }, collectionToBeEdited ? /*#__PURE__*/React__default['default'].createElement(DeleteIcon__default['default'], {
2723
- sx: {
2724
- color: "ibisRed.main",
2725
- marginRight: "4px"
2726
- }
2727
- }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), collectionToBeEdited ? "Delete Collection" : "Cancel"), /*#__PURE__*/React__default['default'].createElement(Text, {
2728
- fontSize: "14px",
2729
- textAlign: "center",
2730
- fontWeight: "lighter",
2731
- sx: {
2732
- width: "95%"
2733
- }
2734
- }, "By proceeding, you agree to allow Blerp access to the image you choose to upload. Please make sure you have the right to upload the image.")))));
2735
- };
2736
-
2737
- var _templateObject$3, _templateObject2$2, _templateObject3$1;
2738
- var FeaturedBlerpSkeleton = styled__default['default'].div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 234px;\n width: 220px;\n border: 2px solid ", ";\n border-radius: 8px;\n\n @media (max-width: 900px) {\n height: 190px;\n width: 180px;\n border: 2px solid ", ";\n border-radius: 8px;\n }\n\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
2739
- return props.theme.colors.grey2;
2740
- }, function (props) {
2741
- return props.theme.colors.grey2;
2742
- });
2743
- var FeaturedBlerpCircle = styled__default['default'].div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default['default'](["\n height: 135px;\n width: 135px;\n border-radius: 50%;\n margin-top: 30px;\n background: ", ";\n\n @media (max-width: 900px) {\n height: 100px;\n width: 100px;\n margin-top: 30px;\n }\n"])), function (props) {
2744
- return props.theme.colors.grey2;
2745
- });
2746
- var FeaturedBlerpTitle = styled__default['default'].div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral__default['default'](["\n width: 80%;\n height: 24px;\n background: ", ";\n margin-bottom: 20px;\n"])), function (props) {
2747
- return props.theme.colors.grey2;
2748
- });
2749
- var BlerpSkeleton$1 = function BlerpSkeleton() {
2750
- return /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpCircle, null), /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpTitle, null));
2751
- };
2752
-
2753
- var _templateObject$2, _templateObject2$1, _templateObject3, _templateObject4;
2754
- var NewBlerpsSkeleton = styled__default['default'].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n height: 44px;\n background: ", ";\n border-radius: 8px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
2755
- return props.theme.colors.grey4;
2756
- });
2757
- var LeftNewBlerpsBox = styled__default['default'].div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral__default['default'](["\n height: 38px;\n width: 38px;\n background-color: ", ";\n border-radius: 8px;\n margin-left: 4px;\n"])), function (props) {
2758
- return props.theme.colors.white;
2759
- });
2760
- var RightNewBlerpsBox = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 80px;\n margin-right: 10px;\n"])));
2761
- var NewBlerpsCircle = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n height: 34px;\n width: 34px;\n background-color: ", ";\n border-radius: 50%;\n"])), function (props) {
2762
- return props.theme.colors.white;
2763
- });
2764
- var BlerpListViewSkeleton$1 = function BlerpListViewSkeleton() {
2765
- return /*#__PURE__*/React__default['default'].createElement(NewBlerpsSkeleton, {
2766
- md: 6,
2767
- lg: 4
2768
- }, /*#__PURE__*/React__default['default'].createElement(LeftNewBlerpsBox, null), /*#__PURE__*/React__default['default'].createElement(RightNewBlerpsBox, null, /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null), /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null)));
2769
- };
2770
-
2771
- var _templateObject$1, _templateObject2;
2772
- var FeaturedCollectionSkeleton = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n height: 200px;\n width: 200px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.7;\n }\n }\n"])));
2773
- var FeaturedCollectionSquare = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 8px;\n\n ", ";\n"])), function (props) {
2774
- return props.depth === "1" ? "z-index: 5; background: ".concat(props.theme.colors.grey4, "; ") : props.depth === "2" ? "z-index: 4; \n background: ".concat(props.theme.colors.grey6, "; \n transform: skewX(-5deg); \n left: 8px; \n height: 94%; \n bottom: 0") : props.depth === "3" ? "background: ".concat(props.theme.colors.grey7, ";\n transform: skewX(-10deg); \n left: 15px; \n height: 87%; \n bottom: 0") : "background: ".concat(props.theme.colors.ibisRed);
2775
- });
2776
- var CollectionSkeleton$1 = function CollectionSkeleton() {
2777
- return /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
2778
- depth: "1"
2779
- }), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
2780
- depth: "2"
2781
- }), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
2782
- depth: "3"
2783
- }));
2784
- };
2785
-
2786
- var _grey;
2787
-
2788
- var icons = {
2789
- white: {
2790
- account: "https://storage.googleapis.com/blerp_products/Icons/Account-White.svg",
2791
- arrowDown: "https://storage.googleapis.com/blerp_products/Icons/Arrowdown-White.svg",
2792
- arrowLeft: "https://storage.googleapis.com/blerp_products/Icons/Arrowleft-White.svg",
2793
- arrowRight: "https://storage.googleapis.com/blerp_products/Icons/Arrowright-White.svg",
2794
- arrowUp: "https://storage.googleapis.com/blerp_products/Icons/Arrowup-White.svg",
2795
- dashboardArrow: "https://storage.googleapis.com/blerp_products/Icons/ChartArrowUp-White.svg",
2796
- backArrow: "https://storage.googleapis.com/blerp_products/Icons/Backarrow-White.svg",
2797
- bitPrice: "https://storage.googleapis.com/blerp_products/Icons/Bitprice-white.svg",
2798
- blerpBlast: "https://storage.googleapis.com/blerp_products/Icons/Blerpblast-white.svg",
2799
- blerpLogo: "https://storage.googleapis.com/blerp_products/Icons/Blerpssmall-White.svg",
2800
- beetBasket: "https://storage.googleapis.com/blerp_products/Icons/BasketoBeets-White.svg",
2801
- block: "https://storage.googleapis.com/blerp_products/Icons/Blockbig-White.svg",
2802
- discordLogo: "https://storage.googleapis.com/blerp_products/Icons/Discord-Logo-White",
2803
- playSolid: "https://storage.googleapis.com/blerp_products/Icons/Boardssmall-White.svg",
2804
- playOutline: "https://storage.googleapis.com/blerp_products/Icons/Play-White.svg",
2805
- copy: "https://storage.googleapis.com/blerp_products/Icons/Copy-White.svg",
2806
- edit: "https://storage.googleapis.com/blerp_products/Icons/Edit-White.svg",
2807
- heart: "https://storage.googleapis.com/blerp_products/Icons/Favoritessmall-White.svg",
2808
- twitchGlitch: "https://storage.googleapis.com/blerp_products/Icons/TwitchGlitchWhite.svg",
2809
- menu2Bars: "https://storage.googleapis.com/blerp_products/Icons/Menu-White.svg",
2810
- pause: "https://storage.googleapis.com/blerp_products/Icons/Pause-White.svg",
2811
- plus: "https://storage.googleapis.com/blerp_products/Icons/Plus-White.svg",
2812
- questionMarkWithCircle: "https://storage.googleapis.com/blerp_products/Icons/Questionmark-White.svg",
2813
- share: "https://storage.googleapis.com/blerp_products/Icons/Share-White.svg",
2814
- volume: "https://storage.googleapis.com/blerp_products/Icons/Volume-White.svg",
2815
- close: "https://storage.googleapis.com/blerp_products/Web/Navbar/close-button-white.svg",
2816
- wrench: "https://storage.googleapis.com/blerp_products/Icons/Wrench-White.svg",
2817
- beet: "https://storage.googleapis.com/blerp_products/Icons/Beet-White.svg",
2818
- check: "https://storage.googleapis.com/blerp_products/Icons/Checkmark-White.svg",
2819
- settings: "https://storage.googleapis.com/blerp_products/Twitch/Twitch%20Version%202.0/Settings%20icon%20white.svg",
2820
- walkOn: "https://storage.googleapis.com/blerp_products/Icons/WalkOn-White.svg",
2821
- channelPoints: "https://storage.googleapis.com/blerp_products/Icons/ChannelPoints-White.svg",
2822
- shortCut: "https://storage.googleapis.com/blerp_products/Icons/ShortCut-White.svg",
2823
- swap: "https://storage.googleapis.com/blerp_products/Icons/Swap-White.svg",
2824
- swapVertical: "https://storage.googleapis.com/blerp_products/Icons/SwapVertical-White.svg",
2825
- trash: "https://storage.googleapis.com/blerp_products/Icons/Trash-White.svg",
2826
- bell: "https://storage.googleapis.com/blerp_products/Icons/Bell-White.svg",
2827
- controlKey: "https://storage.googleapis.com/blerp_products/Icons/Control-White.svg",
2828
- commandKey: "https://storage.googleapis.com/blerp_products/Icons/Command-White.svg",
2829
- altKey: "https://storage.googleapis.com/blerp_products/Icons/Alt-White.svg",
2830
- shiftKey: "https://storage.googleapis.com/blerp_products/Icons/Shift-Grey3.svg",
2831
- stop: "https://storage.googleapis.com/blerp_products/Web/Blerps/stop%20square.svg",
2832
- shareTo: "https://storage.googleapis.com/blerp_products/Icons/Share%20to-White.svg",
2833
- computer: "https://storage.googleapis.com/blerp_products/Icons/SharetoComputer-White.svg",
2834
- obs: "https://storage.googleapis.com/blerp_products/Icons/SharetoOBS-White.svg"
2835
- },
2836
- grey: (_grey = {
2837
- threeDot: "https://storage.googleapis.com/blerp_products/Icons/3dot-Grey.svg",
2838
- blerpFullWordWaterMark: "https://storage.googleapis.com/blerp_products/Icons/Blerpfullwordmark-Grey.svg",
2839
- eyeActive: "https://storage.googleapis.com/blerp_products/Icons/Eyeactive-Grey.svg",
2840
- eyeDeactive: "https://storage.googleapis.com/blerp_products/Icons/Eyedeactive-grey.svg",
2841
- plusWithCircle: "https://storage.googleapis.com/blerp_products/Icons/Pluscircle-Grey.svg",
2842
- beetBasket: "https://storage.googleapis.com/blerp_products/Icons/BasketoBeets-Grey7.svg",
2843
- beet: "https://storage.googleapis.com/blerp_products/Icons/Beet-Grey5.svg",
2844
- shortCut: "https://storage.googleapis.com/blerp_products/Icons/Shortcut-grey3.svg",
2845
- search: "https://storage.googleapis.com/blerp_products/Icons/Search-Grey3.svg",
2846
- home: "https://storage.googleapis.com/blerp_products/Icons/Home-Grey3.svg",
2847
- heart: "https://storage.googleapis.com/blerp_products/Icons/Heart-Grey3.svg",
2848
- create: "https://storage.googleapis.com/blerp_products/Icons/Create-Grey3.svg",
2849
- library: "https://storage.googleapis.com/blerp_products/Icons/Library-Grey3.svg",
2850
- boards: "https://storage.googleapis.com/blerp_products/Icons/Boards-Grey3.svg",
2851
- tabView: "https://storage.googleapis.com/blerp_products/Icons/TabView-Grey4.svg",
2852
- share: "https://storage.googleapis.com/blerp_products/Icons/Recent-Grey3.svg",
2853
- blerpLogo: "https://storage.googleapis.com/blerp_products/Icons/Blerp-Grey3.svg",
2854
- bell: "https://storage.googleapis.com/blerp_products/Icons/Bell-Grey5.svg"
2855
- }, _defineProperty__default['default'](_grey, "tabView", "https://storage.googleapis.com/blerp_products/Icons/TabView-Grey4.svg"), _defineProperty__default['default'](_grey, "controlKey", "https://storage.googleapis.com/blerp_products/Icons/Control-Grey3.svg"), _defineProperty__default['default'](_grey, "commandKey", "https://storage.googleapis.com/blerp_products/Icons/Command-Grey3.svg"), _defineProperty__default['default'](_grey, "altKey", "https://storage.googleapis.com/blerp_products/Icons/Alt-Grey3.svg"), _defineProperty__default['default'](_grey, "shiftKey", "https://storage.googleapis.com/blerp_products/Icons/Shift-Grey3.svg"), _defineProperty__default['default'](_grey, "close", "https://storage.googleapis.com/blerp_products/Icons/Xclose-Grey4.svg"), _defineProperty__default['default'](_grey, "shortcutsOff", "https://storage.googleapis.com/blerp_products/Icons/ShortCutsOff-Grey.svg"), _grey),
2856
- black: {
2857
- computer: "https://storage.googleapis.com/blerp_products/Icons/SharetoComputer-NotBlack.svg",
2858
- audioLevels: "https://storage.googleapis.com/blerp_products/Icons/Audiolevels-NotBlack.svg",
2859
- account: "https://storage.googleapis.com/blerp_products/Icons/Account-Black.svg",
2860
- apps: "https://storage.googleapis.com/blerp_products/Icons/Apps-Black.svg",
2861
- arrowLeft: "https://storage.googleapis.com/blerp_products/Icons/Arrowleft-Black.svg",
2862
- arrowRight: "https://storage.googleapis.com/blerp_products/Icons/Arrowright-Black.svg",
2863
- arrowDown: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Down.svg",
2864
- arrowUp: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Up.svg",
2865
- dashboardArrow: "https://storage.googleapis.com/blerp_products/Icons/ChartArrowUp-NotBlack.svg",
2866
- backArrow: "https://storage.googleapis.com/blerp_products/Icons/Backarrow-Black.svg",
2867
- blerpLogo: "https://storage.googleapis.com/blerp_products/Icons/Blerpssmall-Black.svg",
2868
- block: "https://storage.googleapis.com/blerp_products/Icons/Blockbig-Black.svg",
2869
- discordLogo: "https://storage.googleapis.com/blerp_products/Icons/Discord-Logo-Black",
2870
- playSolid: "https://storage.googleapis.com/blerp_products/Icons/Boardssmall-Black.svg",
2871
- playOutline: "https://storage.googleapis.com/blerp_products/Icons/Play-Black.svg",
2872
- edit: "https://storage.googleapis.com/blerp_products/Icons/Edit-Black.svg",
2873
- heart: "https://storage.googleapis.com/blerp_products/Icons/Favoritessmall-Black.svg",
2874
- menu2Bars: "https://storage.googleapis.com/blerp_products/Icons/Menu-Black.svg",
2875
- pause: "https://storage.googleapis.com/blerp_products/Icons/Pause-Black.svg",
2876
- questionMarkWithCircle: "https://storage.googleapis.com/blerp_products/Icons/Questionmark-Black.svg",
2877
- share: "https://storage.googleapis.com/blerp_products/Icons/Share-Black.svg",
2878
- soundEmotes: "https://storage.googleapis.com/blerp_products/Crm/SoundBars-NotBlack.svg",
2879
- threeBars: "https://storage.googleapis.com/blerp_products/Crm/SoundBars-NotBlack.svg",
2880
- plus: "https://storage.googleapis.com/blerp_products/Crm/Plus-NotBlack.svg",
2881
- twitchGlitch: "https://storage.googleapis.com/blerp_products/Icons/TwitchGlitchBlackOps.svg",
2882
- volume: "https://storage.googleapis.com/blerp_products/Icons/Volume-Black.svg",
2883
- close: "https://storage.googleapis.com/blerp_products/Web/Blerp%20Page/x%20close.svg",
2884
- settings: "https://storage.googleapis.com/blerp_products/Twitch/Twitch%20Version%202.0/Settings%20icon%20Black.svg",
2885
- wrench: "https://storage.googleapis.com/blerp_products/Icons/Wrench-NotBlack.svg",
2886
- beet: "https://storage.googleapis.com/blerp_products/Icons/Beet-NotBlack.svg",
2887
- check: "https://storage.googleapis.com/blerp_products/Icons/Checkmark-Black.svg",
2888
- walkOn: "https://storage.googleapis.com/blerp_products/Icons/WalkOn-NotBlack.svg",
2889
- channelPoints: "https://storage.googleapis.com/blerp_products/Icons/ChannelPoints-NotBlack.svg",
2890
- link: "https://storage.googleapis.com/blerp_products/Icons/Linked-NotBlack.svg",
2891
- unLink: "https://storage.googleapis.com/blerp_products/Icons/Ulinked-NotBlack.svg",
2892
- trash: "https://storage.googleapis.com/blerp_products/Icons/Trash-grey7.svg",
2893
- threeDot: "https://storage.googleapis.com/blerp_products/Icons/3dot-NotBlack.svg",
2894
- error: "https://storage.googleapis.com/blerp_products/Icons/Error-NotBlack.svg",
2895
- reload: "https://storage.googleapis.com/blerp_products/Icons/Reload-NotBlack.svg",
2896
- shortCut: "https://storage.googleapis.com/blerp_products/Icons/Shortcut-Notblack.svg",
2897
- search: "https://storage.googleapis.com/blerp_products/Icons/Search-Notblack.svg",
2898
- home: "https://storage.googleapis.com/blerp_products/Icons/Home-NotBlack.svg",
2899
- create: "https://storage.googleapis.com/blerp_products/Icons/Create-NotBlack.svg",
2900
- library: "https://storage.googleapis.com/blerp_products/Icons/Library-NotBlack.svg",
2901
- boards: "https://storage.googleapis.com/blerp_products/Icons/Board-Notblack.svg",
2902
- swap: "https://storage.googleapis.com/blerp_products/Icons/Swap-Notblack.svg",
2903
- maximize: "https://storage.googleapis.com/blerp_products/Icons/Maximize-NotBlack.svg",
2904
- minimize: "https://storage.googleapis.com/blerp_products/Icons/Minimize-NotBlack.svg",
2905
- bell: "https://storage.googleapis.com/blerp_products/Icons/Bell-NotBlack.svg",
2906
- controlKey: "https://storage.googleapis.com/blerp_products/Icons/Control-NotBlack.svg",
2907
- commandKey: "https://storage.googleapis.com/blerp_products/Icons/Command-NotBlack.svg",
2908
- altKey: "https://storage.googleapis.com/blerp_products/Icons/Alt-NotBlack.svg",
2909
- shiftKey: "https://storage.googleapis.com/blerp_products/Icons/Shift-NotBlack.svg",
2910
- shareTo: "https://storage.googleapis.com/blerp_products/Icons/Share%20to-Notblack.svg"
2911
- },
2912
- ibis: {
2913
- settings: "https://storage.googleapis.com/blerp_products/Icons/Settings-IbisRed.svg",
2914
- bell: "https://storage.googleapis.com/blerp_products/Icons/Bell-IbisRed.svg",
2915
- audioLevels: "https://storage.googleapis.com/blerp_products/Icons/Audiolevels-Ibis.svg",
2916
- blerpLogo: "https://storage.googleapis.com/blerp_products/Icons/Blerpblip-Ibis.svg",
2917
- error: "https://storage.googleapis.com/blerp_products/Icons/Error-Ibis.svg"
2918
- },
2919
- seafoam: {
2920
- update: "https://storage.googleapis.com/blerp_products/Icons/Update-Seafoam.svg"
2921
- },
2922
- yellow: {
2923
- warning: "https://storage.googleapis.com/blerp_products/Icons/Warning-Yellow.svg"
2924
- },
2925
- starling: {
2926
- tabView: "https://storage.googleapis.com/blerp_products/Icons/Tabview-Starling.svg"
2927
- },
2928
- other: {
2929
- subStarTier1: "https://storage.googleapis.com/blerp_products/Icons/Substartier1-purple.svg",
2930
- subStarTier2: "https://storage.googleapis.com/blerp_products/Icons/Substartier2-purple.svg",
2931
- subStarTier3: "https://storage.googleapis.com/blerp_products/Icons/Substartier3-purple.svg",
2932
- twitchGlitch: "https://storage.googleapis.com/blerp_products/Icons/Twitchglitch-Purple.svg",
2933
- discordLogo: "https://storage.googleapis.com/blerp_products/Web/Landing%20Pages/Discord/Discord%20logo.svg",
2934
- rainbow: "https://storage.googleapis.com/blerp_products/Crm/Overview-Rainbow.svg",
2935
- tabView: "https://storage.googleapis.com/blerp_products/Icons/Tabview-Starling.svg"
2936
- }
2937
- };
2938
-
2939
- function ownKeys$1(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; }
2940
-
2941
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(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$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2942
- var fonts = "@font-face {\n font-family: \"Odudo\";\n font-weight: normal;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: lighter;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: 300;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: 400;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: bolder;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: 600;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: bold;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: 700;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n format(\"woff\");\n}";
2943
- var theme = styles.createTheme({
2944
- typography: {
2945
- fontFamily: "Odudo, Arial"
2946
- },
2947
- components: {
2948
- MuiPopover: {
2949
- defaultProps: {
2950
- BackdropProps: {
2951
- sx: {
2952
- backgroundColor: "transparent",
2953
- backdropFilter: "none"
2954
- }
2955
- }
2956
- }
2957
- },
2958
- MuiBackdrop: {
2959
- styleOverrides: {
2960
- root: {
2961
- backgroundColor: "".concat(colors.grey6, "70"),
2962
- backdropFilter: "blur(4px)"
2963
- }
2964
- }
2965
- },
2966
- MuiSvgIcon: {
2967
- styleOverrides: {
2968
- root: {
2969
- color: colors.notBlack
2970
- }
2971
- }
2972
- },
2973
- MuiFilledInput: {
2974
- styleOverrides: {
2975
- root: {
2976
- color: colors.notBlack,
2977
- backgroundColor: colors.grey2,
2978
- "& textarea": {
2979
- color: colors.notBlack
2980
- },
2981
- ":hover": {
2982
- backgroundColor: colors.grey2
2983
- },
2984
- ":before": {
2985
- borderColor: colors.notBlack
2986
- },
2987
- ":hover:before": {
2988
- borderColor: "".concat(colors.notBlack, " !important")
2989
- }
2990
- }
2991
- }
2992
- },
2993
- MuiInput: {
2994
- styleOverrides: {
2995
- root: {
2996
- color: colors.notBlack,
2997
- borderColor: colors.notBlack,
2998
- ":before": {
2999
- borderColor: colors.notBlack
3000
- },
3001
- ":hover:before": {
3002
- borderColor: "".concat(colors.notBlack, " !important")
3003
- }
3004
- }
3005
- }
3006
- },
3007
- MuiInputLabel: {
3008
- styleOverrides: {
3009
- root: {
3010
- color: colors.notBlack
3011
- }
3012
- }
3013
- },
3014
- MuiTypography: {
3015
- styleOverrides: {
3016
- root: {
3017
- color: colors.notBlack
3018
- }
3019
- }
3020
- },
3021
- MuiButton: {
3022
- styleOverrides: {
3023
- root: {
3024
- borderRadius: "30px",
3025
- fontWeight: "bold",
3026
- letterSpacing: "0.05rem"
3027
- }
3028
- },
3029
- variants: [{
3030
- props: {
3031
- variant: "outlined"
3032
- },
3033
- style: {
3034
- borderWidth: "2px",
3035
- "&:hover": {
3036
- borderWidth: "2px"
3037
- }
3038
- }
3039
- }]
3040
- },
3041
- MuiCssBaseline: {
3042
- styleOverrides: "\n ".concat(fonts, "\n ")
3043
- }
3044
- },
3045
- mode: "light",
3046
- colors: lightColors,
3047
- icons: icons,
3048
- palette: lightPalette
3049
- });
3050
- var darkTheme = styles.createTheme({
3051
- typography: {
3052
- fontFamily: "Odudo, Arial"
3053
- },
3054
- components: {
3055
- MuiTypography: {
3056
- styleOverrides: {
3057
- root: {
3058
- color: colors.white
3059
- }
3060
- }
3061
- },
3062
- MuiFilledInput: {
3063
- styleOverrides: {
3064
- root: {
3065
- color: colors.white,
3066
- backgroundColor: colors.grey7,
3067
- "& textarea": {
3068
- color: colors.white
3069
- },
3070
- ":hover": {
3071
- backgroundColor: colors.grey7
3072
- },
3073
- ":before": {
3074
- borderColor: colors.waxwing
3075
- },
3076
- ":hover:before": {
3077
- borderColor: "".concat(colors.white, " !important")
3078
- }
3079
- }
3080
- }
3081
- },
3082
- MuiInput: {
3083
- styleOverrides: {
3084
- root: {
3085
- color: colors.white,
3086
- borderColor: colors.white,
3087
- ":before": {
3088
- borderColor: colors.waxwing
3089
- },
3090
- ":hover:before": {
3091
- borderColor: "".concat(colors.white, " !important")
3092
- }
3093
- }
3094
- }
3095
- },
3096
- MuiInputLabel: {
3097
- styleOverrides: {
3098
- root: {
3099
- color: colors.white
3100
- }
3101
- }
3102
- },
3103
- MuiPopover: {
3104
- defaultProps: {
3105
- BackdropProps: {
3106
- sx: {
3107
- backgroundColor: "transparent",
3108
- backdropFilter: "none"
3109
- }
3110
- }
3111
- }
3112
- },
3113
- MuiBackdrop: {
3114
- styleOverrides: {
3115
- root: {
3116
- backgroundColor: "".concat(colors.grey5, "70"),
3117
- backdropFilter: "blur(4px)"
3118
- }
3119
- }
3120
- },
3121
- MuiSvgIcon: {
3122
- styleOverrides: {
3123
- root: {
3124
- color: colors.white
3125
- }
3126
- }
3127
- },
3128
- MuiButton: {
3129
- styleOverrides: {
3130
- root: {
3131
- borderRadius: "30px",
3132
- fontWeight: "bold",
3133
- letterSpacing: "0.05rem"
3134
- }
3135
- },
3136
- variants: [{
3137
- props: {
3138
- variant: "outlined"
3139
- },
3140
- style: {
3141
- borderWidth: "2px",
3142
- "&:hover": {
3143
- borderWidth: "2px"
3144
- }
3145
- }
3146
- }]
3147
- },
3148
- MuiCssBaseline: {
3149
- styleOverrides: "\n ".concat(fonts, "\n ")
3150
- }
3151
- },
3152
- mode: "dark",
3153
- colors: darkColors,
3154
- icons: icons,
3155
- palette: darkPalette
3156
- });
3157
-
3158
- var BlerpTheme = function BlerpTheme(_ref) {
3159
- var mode = _ref.mode,
3160
- children = _ref.children;
3161
- var currentTheme = mode === "dark" ? darkTheme : theme; // ...
3162
-
3163
- return /*#__PURE__*/React__default['default'].createElement(styles.ThemeProvider, {
3164
- theme: currentTheme
3165
- }, /*#__PURE__*/React__default['default'].createElement(styled.ThemeProvider, {
3166
- theme: _objectSpread$1(_objectSpread$1({}, mainTheme), {}, {
3167
- icons: icons,
3168
- mode: mode === "dark" ? "dark" : "light"
3169
- }, currentTheme)
3170
- }, children));
3171
- };
3172
-
3173
- //primary and secondary action buttons
3174
-
3175
- var CollectionCard$1 = function CollectionCard(_ref) {
3176
- var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$image4, _collection$image4$or;
3177
-
3178
- var collection = _ref.collection,
3179
- variantSize = _ref.variantSize,
3180
- handleClickBackground = _ref.handleClickBackground,
3181
- handleClickSave = _ref.handleClickSave,
3182
- handleClickDrag = _ref.handleClickDrag,
3183
- primaryActionButton = _ref.primaryActionButton,
3184
- secondaryActionButton = _ref.secondaryActionButton,
3185
- fluid = _ref.fluid,
3186
- fontSize = _ref.fontSize,
3187
- isLink = _ref.isLink;
3188
-
3189
- var _useState = React.useState(null),
3190
- _useState2 = _slicedToArray__default['default'](_useState, 2),
3191
- cardColors = _useState2[0],
3192
- setCardColors = _useState2[1];
3193
-
3194
- var _usePalette = reactPalette.usePalette(collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url),
3195
- data = _usePalette.data;
3196
- _usePalette.loading;
3197
- _usePalette.error;
3198
-
3199
- var smallSize = {
3200
- size: "small",
3201
- width: "70px",
3202
- height: "70px"
3203
- };
3204
- var largeSize = {
3205
- size: "large",
3206
- width: "200px",
3207
- height: "200px"
3208
- };
3209
- var sizeParams = largeSize;
3210
-
3211
- if (variantSize === "small") {
3212
- sizeParams = smallSize;
3213
- }
3214
-
3215
- return /*#__PURE__*/React__default['default'].createElement(Box, {
3216
- sx: {
3217
- display: "flex",
3218
- alignItems: "center",
3219
- width: fluid ? "80%" : sizeParams.width,
3220
- height: fluid ? "80%" : sizeParams.height,
3221
- ":hover #collection-background-1": {
3222
- transform: "rotate(7deg)",
3223
- height: "91%",
3224
- right: "-11px",
3225
- top: "12px"
3226
- },
3227
- ":hover #collection-background-2": {
3228
- transform: "rotate(14deg)",
3229
- height: "84%",
3230
- right: "-20px",
3231
- top: "24px"
3232
- }
3233
- }
3234
- }, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
3235
- src: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url,
3236
- getColors: function getColors(colors) {
3237
- return setCardColors(colors);
3238
- }
3239
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
3240
- onClick: function onClick() {
3241
- handleClickBackground();
3242
- },
3243
- sx: {
3244
- borderRadius: "8px",
3245
- position: "relative",
3246
- width: fluid ? "90%" : sizeParams.width,
3247
- height: fluid ? "90%" : sizeParams.height,
3248
- cursor: "pointer",
3249
- ":hover #collection-background-1": {
3250
- transform: "rotate(7deg)",
3251
- height: "91%",
3252
- right: "-11px",
3253
- top: "12px"
3254
- },
3255
- ":hover #collection-background-2": {
3256
- transform: "rotate(14deg)",
3257
- height: "84%",
3258
- right: "-20px",
3259
- top: "24px"
3260
- }
3261
- }
3262
- }, variantSize !== "small" ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Box, {
3263
- sx: {
3264
- backgroundColor: "white.override",
3265
- borderRadius: "8px",
3266
- width: "100%",
3267
- height: "100%",
3268
- position: "absolute",
3269
- top: "0",
3270
- zIndex: "3"
3271
- }
3272
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
3273
- id: "collection-background-1",
3274
- sx: {
3275
- backgroundImage: "linear-gradient(".concat(data.muted || "#444444", ", #444444)"),
3276
- borderRadius: "8px",
3277
- width: "50%",
3278
- height: "94%",
3279
- position: "absolute",
3280
- transform: "rotate(5deg) scale(1)",
3281
- right: "-8px",
3282
- top: "8px",
3283
- zIndex: "2",
3284
- transition: "0.2s ease-out"
3285
- }
3286
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
3287
- id: "collection-background-2",
3288
- sx: {
3289
- backgroundImage: "linear-gradient(".concat(data.darkMuted || "#252525", ", #252525)"),
3290
- borderRadius: "8px",
3291
- width: "50%",
3292
- height: "89%",
3293
- position: "absolute",
3294
- transform: "rotate(10deg) scale(1)",
3295
- right: "-16px",
3296
- top: "16px",
3297
- zIndex: "1",
3298
- transition: "0.2s ease-out"
3299
- }
3300
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
3301
- sx: {
3302
- backgroundImage: "linear-gradient(".concat(data.muted || "#000000", "7a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
3303
- backgroundSize: "cover",
3304
- backgroundPosition: "center",
3305
- backgroundRepeat: "no-repeat",
3306
- width: "100%",
3307
- height: "100%",
3308
- borderRadius: "8px",
3309
- display: "flex",
3310
- justifyContent: "center",
3311
- alignItems: "center",
3312
- position: "absolute",
3313
- zIndex: "3"
3314
- }
3315
- }, primaryActionButton ? primaryActionButton : collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkRounded, {
3316
- onClick: function onClick(e) {
3317
- e.stopPropagation();
3318
- handleClickSave(false);
3319
- },
3320
- sx: {
3321
- position: "absolute",
3322
- top: "5px",
3323
- left: "5px",
3324
- color: "white.override"
3325
- }
3326
- }) : /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkAddOutlined, {
3327
- onClick: function onClick(e) {
3328
- e.stopPropagation();
3329
- handleClickSave(true);
3330
- },
3331
- sx: {
3332
- position: "absolute",
3333
- top: "5px",
3334
- left: "5px",
3335
- color: "white.override"
3336
- }
3337
- }), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(iconsMaterial.DragIndicatorRounded, {
3338
- onClick: function onClick(e) {
3339
- e.stopPropagation();
3340
- handleClickDrag();
3341
- },
3342
- sx: {
3343
- position: "absolute",
3344
- top: "5px",
3345
- right: "5px",
3346
- color: "white.override",
3347
- transform: "rotate(90deg)"
3348
- }
3349
- }), isLink ? /*#__PURE__*/React__default['default'].createElement("a", {
3350
- href: "/sound-collection/".concat(collection._id),
3351
- style: {
3352
- color: "white",
3353
- textDecoration: "none"
3354
- }
3355
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3356
- fontSize: fontSize ? fontSize : "24px",
3357
- color: "white.override",
3358
- textAlign: "center",
3359
- sx: {
3360
- ":hover": {
3361
- textDecoration: "underline"
3362
- }
3363
- }
3364
- }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
3365
- fontSize: fontSize ? fontSize : "24px",
3366
- color: "white.override",
3367
- textAlign: "center"
3368
- }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default['default'].createElement(Box, {
3369
- sx: {
3370
- backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
3371
- backgroundSize: "cover",
3372
- backgroundPosition: "center",
3373
- backgroundRepeat: "no-repeat",
3374
- width: "100%",
3375
- height: "100%",
3376
- borderRadius: "8px",
3377
- display: "flex",
3378
- justifyContent: "center",
3379
- alignItems: "center",
3380
- position: "relative"
3381
- }
3382
- })));
3383
- };
3384
-
3385
- var UserProfileHeader = function UserProfileHeader(_ref) {
3386
- var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
3387
-
3388
- var followUser = _ref.followUser,
3389
- isOwner = _ref.isOwner,
3390
- userData = _ref.userData,
3391
- openEdit = _ref.openEdit;
3392
- var theme = React.useContext(styled.ThemeContext);
3393
-
3394
- var _useState = React.useState(null),
3395
- _useState2 = _slicedToArray__default['default'](_useState, 2),
3396
- profileColors = _useState2[0],
3397
- setProfileColors = _useState2[1];
3398
-
3399
- var size = useWindowSize();
3400
-
3401
- var renderSocialLinks = function renderSocialLinks() {
3402
- var _userData$socialLinks;
3403
-
3404
- return userData === null || userData === void 0 ? void 0 : (_userData$socialLinks = userData.socialLinks) === null || _userData$socialLinks === void 0 ? void 0 : _userData$socialLinks.map(function (socialItem, index) {
3405
- var icon;
3406
-
3407
- switch (socialItem.name) {
3408
- case "twitch":
3409
- icon = /*#__PURE__*/React__default['default'].createElement(TwitchIcon, {
3410
- sx: {
3411
- color: "notBlack.main",
3412
- cursor: "pointer",
3413
- ":hover": {
3414
- color: "starling.main"
3415
- }
3416
- }
3417
- });
3418
- break;
3419
-
3420
- case "twitter":
3421
- icon = /*#__PURE__*/React__default['default'].createElement(TwitterIcon__default['default'], {
3422
- sx: {
3423
- color: "notBlack.main",
3424
- cursor: "pointer",
3425
- ":hover": {
3426
- color: "starling.main"
3427
- }
3428
- }
3429
- });
3430
- break;
3431
-
3432
- case "youtube":
3433
- icon = /*#__PURE__*/React__default['default'].createElement(YouTubeIcon__default['default'], {
3434
- sx: {
3435
- color: "notBlack.main",
3436
- cursor: "pointer",
3437
- ":hover": {
3438
- color: "starling.main"
3439
- }
3440
- }
3441
- });
3442
- break;
3443
-
3444
- case "instagram":
3445
- icon = /*#__PURE__*/React__default['default'].createElement(InstagramIcon__default['default'], {
3446
- sx: {
3447
- color: "notBlack.main",
3448
- cursor: "pointer",
3449
- ":hover": {
3450
- color: "starling.main"
3451
- }
3452
- }
3453
- });
3454
- break;
3455
-
3456
- case "pinterest":
3457
- icon = /*#__PURE__*/React__default['default'].createElement(PinterestIcon__default['default'], {
3458
- sx: {
3459
- color: "notBlack.main",
3460
- cursor: "pointer",
3461
- ":hover": {
3462
- color: "starling.main"
3463
- }
3464
- }
3465
- });
3466
- break;
3467
-
3468
- case "facebook":
3469
- icon = /*#__PURE__*/React__default['default'].createElement(FacebookIcon__default['default'], {
3470
- sx: {
3471
- color: "notBlack.main",
3472
- cursor: "pointer",
3473
- ":hover": {
3474
- color: "starling.main"
3475
- }
3476
- }
3477
- });
3478
- break;
3479
- }
3480
-
3481
- return /*#__PURE__*/React__default['default'].createElement("a", {
3482
- key: socialItem.name + index,
3483
- target: "_blank",
3484
- href: socialItem.link,
3485
- style: {
3486
- margin: "5px",
3487
- height: "65%"
3488
- },
3489
- rel: "nofollow noreferrer"
3490
- }, icon);
3491
- });
3492
- };
3493
-
3494
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
3495
- src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
3496
- getColors: function getColors(colors) {
3497
- return setProfileColors(colors);
3498
- }
3499
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
3500
- width: "100%",
3501
- sx: {
3502
- height: "250px",
3503
- justifyContent: size.width <= 600 ? "space-around" : "center",
3504
- alignItems: "center",
3505
- 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, ")"),
3506
- backgroundRepeat: "no-repeat",
3507
- backgroundSize: "cover",
3508
- backgroundPosition: "center",
3509
- position: "relative",
3510
- overflow: "hidden"
3511
- }
3512
- }, isOwner && /*#__PURE__*/React__default['default'].createElement(IconButton, {
3513
- sx: {
3514
- position: "absolute",
3515
- top: "10px",
3516
- right: "10px",
3517
- cursor: "pointer",
3518
- color: "white.main",
3519
- ":hover": {
3520
- color: "notBlack.main",
3521
- backgroundColor: "white.main"
3522
- }
3523
- },
3524
- onClick: function onClick() {
3525
- return openEdit();
3526
- }
3527
- }, /*#__PURE__*/React__default['default'].createElement(ModeEditRoundedIcon__default['default'], {
3528
- fontSize: "16px"
3529
- })), /*#__PURE__*/React__default['default'].createElement(Stack, {
3530
- direction: "row",
3531
- width: "80%",
3532
- maxWidth: "1300px",
3533
- flexWrap: "wrap",
3534
- margin: "0 auto",
3535
- justifyContent: "space-between",
3536
- alignItems: "flex-end",
3537
- height: "50%"
3538
- }, /*#__PURE__*/React__default['default'].createElement(Box, {
3539
- sx: {
3540
- background: "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
3541
- boxShadow: "5px 5px 15px #0000009c"
3542
- },
3543
- borderRadius: "8px",
3544
- width: "400px",
3545
- height: "100%"
3546
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3547
- direction: "row",
3548
- height: "100%",
3549
- alignItems: "center",
3550
- position: "relative"
3551
- }, /*#__PURE__*/React__default['default'].createElement(IconButton, {
3552
- sx: {
3553
- position: "absolute",
3554
- padding: "5px",
3555
- top: "5px",
3556
- right: "5px",
3557
- cursor: "pointer",
3558
- color: "white.override",
3559
- fontSize: "12px",
3560
- ":hover": {
3561
- color: "notBlack.main",
3562
- backgroundColor: "white.main"
3563
- }
3564
- },
3565
- onClick: function onClick() {
3566
- isOwner ? openEdit() : followUser({
3567
- variables: {
3568
- record: {
3569
- userIdToFollow: userData._id
3570
- }
3571
- }
3572
- });
3573
- }
3574
- }, isOwner ? /*#__PURE__*/React__default['default'].createElement(ModeEditRoundedIcon__default['default'], {
3575
- fontSize: "small"
3576
- }) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React__default['default'].createElement(PersonRemoveRoundedIcon__default['default'], {
3577
- fontSize: "small"
3578
- }) : /*#__PURE__*/React__default['default'].createElement(PersonAddRoundedIcon__default['default'], {
3579
- fontSize: "small"
3580
- })), /*#__PURE__*/React__default['default'].createElement("img", {
3581
- style: {
3582
- borderRadius: "50%",
3583
- objectFit: "cover",
3584
- width: "90px",
3585
- height: "90px",
3586
- margin: "0 20px"
3587
- },
3588
- alt: "profile img",
3589
- src: 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
3590
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
3591
- marginLeft: "20px"
3592
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3593
- direction: "row"
3594
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3595
- noWrap: true,
3596
- maxWidth: "200px",
3597
- color: "white.override",
3598
- lineHeight: "51px",
3599
- fontSize: size.width <= 600 ? "30px" : "47px"
3600
- }, userData === null || userData === void 0 ? void 0 : userData.username)), /*#__PURE__*/React__default['default'].createElement(Stack, {
3601
- direction: "row",
3602
- divider: /*#__PURE__*/React__default['default'].createElement(Divider, {
3603
- orientation: "vertical",
3604
- flexItem: true,
3605
- sx: {
3606
- borderColor: "white.override",
3607
- margin: "5px"
3608
- }
3609
- })
3610
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3611
- color: "white.override",
3612
- fontSize: "16px"
3613
- }, userData === null || userData === void 0 ? void 0 : userData.followerCount, " Followers"), /*#__PURE__*/React__default['default'].createElement(Text, {
3614
- color: "white.override",
3615
- fontSize: "16px"
3616
- }, userData === null || userData === void 0 ? void 0 : userData.followingCount, " Following"))))), /*#__PURE__*/React__default['default'].createElement(Stack, {
3617
- direction: "row",
3618
- backgroundColor: "grey2.main",
3619
- borderRadius: "8px",
3620
- height: "30%",
3621
- alignItems: "center",
3622
- marginTop: "20px",
3623
- justifyContent: "space-around"
3624
- }, 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(Button, {
3625
- variant: "text",
3626
- onClick: function onClick() {
3627
- return openEdit();
3628
- }
3629
- }, "+ New Social") : /*#__PURE__*/React__default['default'].createElement(IconButton, {
3630
- sx: {
3631
- cursor: "pointer",
3632
- color: "notBlack.main",
3633
- padding: "5px",
3634
- backgroundColor: "grey2.main",
3635
- ":hover": {
3636
- backgroundColor: "white.main"
3637
- }
3638
- },
3639
- onClick: function onClick() {
3640
- return openEdit();
3641
- }
3642
- }, /*#__PURE__*/React__default['default'].createElement(AddRoundedIcon__default['default'], {
3643
- fontSize: "16px"
3644
- })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), renderSocialLinks()))));
3645
- };
3646
-
3647
- var LibraryControls = function LibraryControls(_ref) {
3648
- var _activeBoard$ownerObj;
3649
-
3650
- var setSort = _ref.setSort,
3651
- activeBoard = _ref.activeBoard,
3652
- setSearchTerm = _ref.setSearchTerm,
3653
- hideSearch = _ref.hideSearch;
3654
- _ref.searchTerm;
3655
- var setShowSearch = _ref.setShowSearch;
3656
- _ref.setActiveBoard;
3657
- var hideLayoutButtons = _ref.hideLayoutButtons;
3658
- React.useContext(styled.ThemeContext);
3659
- var size = useWindowSize();
3660
-
3661
- var _useState = React.useState(null),
3662
- _useState2 = _slicedToArray__default['default'](_useState, 2),
3663
- anchor = _useState2[0],
3664
- setAnchor = _useState2[1];
3665
-
3666
- var _useState3 = React.useState(null),
3667
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
3668
- filterAnchor = _useState4[0],
3669
- setFilterAnchor = _useState4[1];
3670
-
3671
- var divRef = React.useRef();
3672
- var filterRef = React.useRef();
3673
-
3674
- var _useState5 = React.useState(""),
3675
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
3676
- inputValue = _useState6[0],
3677
- setInputValue = _useState6[1];
3678
-
3679
- var open = Boolean(anchor);
3680
- var openFilter = Boolean(filterAnchor);
3681
- var timeout = null;
3682
- return /*#__PURE__*/React__default['default'].createElement(Stack, {
3683
- direction: "row",
3684
- alignItems: "center",
3685
- justifyContent: "space-around",
3686
- marginTop: size.width <= 675 && "20px"
3687
- }, activeBoard && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PersonRoundedIcon__default['default'], {
3688
- sx: {
3689
- color: "notBlack.main"
3690
- }
3691
- }), /*#__PURE__*/React__default['default'].createElement(Text, null, activeBoard === null || activeBoard === void 0 ? void 0 : (_activeBoard$ownerObj = activeBoard.ownerObject) === null || _activeBoard$ownerObj === void 0 ? void 0 : _activeBoard$ownerObj.username)), !hideSearch && /*#__PURE__*/React__default['default'].createElement(Box, {
3692
- sx: {
3693
- display: "flex",
3694
- alignItems: "flex-end"
3695
- }
3696
- }, /*#__PURE__*/React__default['default'].createElement(Input, {
3697
- id: "user-library-search-input",
3698
- placeholder: "Search User Library",
3699
- variant: "standard",
3700
- color: "grey6",
3701
- value: inputValue,
3702
- onChange: function onChange(e) {
3703
- setInputValue(e.target.value);
3704
- clearTimeout(timeout); // Make a new timeout set to go off in 1000ms (1 second)
3705
-
3706
- timeout = setTimeout(function () {
3707
- setSearchTerm(e.target.value);
3708
- }, 1000);
3709
- },
3710
- onKeyDown: function onKeyDown(e) {
3711
- // e.preventDefault();
3712
- if (e.key === "Enter") {
3713
- setShowSearch(true);
3714
- }
3715
- },
3716
- sx: {
3717
- maxWidth: "200px",
3718
- "& .MuiInput-root:hover::before": {
3719
- borderColor: "grey6.main"
3720
- },
3721
- "& .MuiInput-root::before": {
3722
- borderColor: "grey5.main"
3723
- }
3724
- },
3725
- InputProps: {
3726
- sx: {
3727
- color: "grey6.main",
3728
- borderColor: "grey6.main"
3729
- },
3730
- startAdornment: /*#__PURE__*/React__default['default'].createElement(material.InputAdornment, {
3731
- position: "start"
3732
- }, /*#__PURE__*/React__default['default'].createElement(SearchRoundedIcon__default['default'], {
3733
- sx: {
3734
- color: "grey6.main"
3735
- }
3736
- })),
3737
- endAdornment: /*#__PURE__*/React__default['default'].createElement(material.InputAdornment, {
3738
- position: "end"
3739
- }, inputValue && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
3740
- sx: {
3741
- cursor: "pointer",
3742
- color: "grey6.main"
3743
- },
3744
- onClick: function onClick() {
3745
- setSearchTerm("");
3746
- setInputValue("");
3747
- setShowSearch(false);
3748
- }
3749
- }), /*#__PURE__*/React__default['default'].createElement(Button, {
3750
- variant: "text",
3751
- color: "notBlack",
3752
- onClick: function onClick() {
3753
- return setShowSearch(true);
3754
- }
3755
- }, "Search")))
3756
- }
3757
- })), /*#__PURE__*/React__default['default'].createElement(Popover, {
3758
- id: "library-controls-popover",
3759
- open: openFilter,
3760
- onClose: function onClose() {
3761
- setFilterAnchor(null);
3762
- },
3763
- anchorEl: filterAnchor,
3764
- PaperProps: {
3765
- sx: {
3766
- width: "160px",
3767
- display: "flex",
3768
- flexDirection: "column",
3769
- alignItems: "center",
3770
- justifyContent: "space-around",
3771
- boxShadow: "0px 3px 6px #00000029",
3772
- padding: "15px 0",
3773
- backgroundColor: "white.main",
3774
- color: "notBlack.main"
3775
- }
3776
- },
3777
- anchorOrigin: {
3778
- vertical: "bottom",
3779
- horizontal: "right"
3780
- },
3781
- transformOrigin: {
3782
- vertical: "top",
3783
- horizontal: "center"
3784
- }
3785
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3786
- direction: "row",
3787
- onClick: function onClick() {
3788
- return setSort("TITLE_ASC");
3789
- },
3790
- sx: {
3791
- width: "100%",
3792
- cursor: "pointer",
3793
- ":hover": {
3794
- backgroundColor: "ibisRed.main",
3795
- color: "white.override"
3796
- }
3797
- }
3798
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3799
- margin: "0 15px",
3800
- fontSize: "18px"
3801
- }, "Alphabetical")), /*#__PURE__*/React__default['default'].createElement(Stack, {
3802
- direction: "row",
3803
- onClick: function onClick() {
3804
- return setSort("CREATEDAT_DESC");
3805
- },
3806
- sx: {
3807
- width: "100%",
3808
- cursor: "pointer",
3809
- ":hover": {
3810
- backgroundColor: "ibisRed.main",
3811
- color: "white.override"
3812
- }
3813
- }
3814
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3815
- margin: "0 15px",
3816
- fontSize: "18px"
3817
- }, "Newest")), /*#__PURE__*/React__default['default'].createElement(Stack, {
3818
- direction: "row",
3819
- onClick: function onClick() {
3820
- return setSort("CREATEDAT_ASC");
3821
- },
3822
- sx: {
3823
- width: "100%",
3824
- cursor: "pointer",
3825
- ":hover": {
3826
- backgroundColor: "ibisRed.main",
3827
- color: "white.override"
3828
- }
3829
- }
3830
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3831
- margin: "0 15px",
3832
- fontSize: "18px"
3833
- }, "Oldest"))), !hideLayoutButtons && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, size.width >= 1000 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, !activeBoard && /*#__PURE__*/React__default['default'].createElement(Button, {
3834
- color: "notBlack",
3835
- ref: filterRef,
3836
- onClick: function onClick() {
3837
- return setFilterAnchor(filterRef.current);
3838
- }
3839
- }, /*#__PURE__*/React__default['default'].createElement(Text, null, "Sort"), /*#__PURE__*/React__default['default'].createElement(SortRoundedIcon__default['default'], null)), /*#__PURE__*/React__default['default'].createElement(IconButton, null, /*#__PURE__*/React__default['default'].createElement(MenuRoundedIcon__default['default'], {
3840
- sx: {
3841
- color: "notBlack.main"
3842
- }
3843
- })), /*#__PURE__*/React__default['default'].createElement(IconButton, null, /*#__PURE__*/React__default['default'].createElement(ViewModuleRoundedIcon__default['default'], {
3844
- sx: {
3845
- color: "notBlack.main"
3846
- }
3847
- }))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(IconButton, {
3848
- ref: divRef,
3849
- onClick: function onClick() {
3850
- return setAnchor(divRef.current);
3851
- }
3852
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
3853
- sx: {
3854
- color: "notBlack.main"
3855
- }
3856
- })), /*#__PURE__*/React__default['default'].createElement(Popover, {
3857
- id: "library-controls-popover",
3858
- open: open,
3859
- onClose: function onClose() {
3860
- setAnchor(null);
3861
- setFilterAnchor(null);
3862
- },
3863
- anchorEl: anchor,
3864
- PaperProps: {
3865
- sx: {
3866
- width: "190px",
3867
- display: "flex",
3868
- flexDirection: "column",
3869
- alignItems: "center",
3870
- justifyContent: "space-around",
3871
- boxShadow: "0px 3px 6px #00000029",
3872
- padding: "15px 0",
3873
- backgroundColor: "white.main"
3874
- }
3875
- },
3876
- anchorOrigin: {
3877
- vertical: "bottom",
3878
- horizontal: "right"
3879
- },
3880
- transformOrigin: {
3881
- vertical: "top",
3882
- horizontal: "center"
3883
- }
3884
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3885
- direction: "row",
3886
- alignItems: "center",
3887
- sx: {
3888
- width: "80%",
3889
- cursor: "pointer",
3890
- margin: "0 auto",
3891
- ":hover": {
3892
- backgroundColor: "grey2.main"
3893
- }
3894
- }
3895
- }, /*#__PURE__*/React__default['default'].createElement(MenuRoundedIcon__default['default'], {
3896
- sx: {
3897
- color: "notBlack.main"
3898
- }
3899
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
3900
- color: "notBlack.main",
3901
- margin: "0 15px",
3902
- fontSize: "18px"
3903
- }, "List View")), /*#__PURE__*/React__default['default'].createElement(Stack, {
3904
- direction: "row",
3905
- alignItems: "center",
3906
- sx: {
3907
- width: "80%",
3908
- cursor: "pointer",
3909
- margin: "0 auto",
3910
- ":hover": {
3911
- backgroundColor: "grey2.main"
3912
- }
3913
- }
3914
- }, /*#__PURE__*/React__default['default'].createElement(ViewModuleRoundedIcon__default['default'], {
3915
- sx: {
3916
- color: "notBlack.main"
3917
- }
3918
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
3919
- color: "notBlack.main",
3920
- margin: "0 15px",
3921
- fontSize: "18px"
3922
- }, "Grid View")), /*#__PURE__*/React__default['default'].createElement(Divider, {
3923
- variant: "middle"
3924
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
3925
- ref: filterRef,
3926
- onClick: function onClick() {
3927
- return setFilterAnchor(filterRef.current);
3928
- },
3929
- direction: "row",
3930
- alignItems: "center",
3931
- justifyContent: "space-between",
3932
- sx: {
3933
- width: "80%",
3934
- cursor: "pointer",
3935
- margin: "0 auto",
3936
- ":hover": {
3937
- backgroundColor: "grey2.main"
3938
- }
3939
- }
3940
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3941
- direction: "row"
3942
- }, /*#__PURE__*/React__default['default'].createElement(SortRoundedIcon__default['default'], {
3943
- sx: {
3944
- color: "notBlack.main"
3945
- }
3946
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
3947
- fontSize: "18px",
3948
- color: "notBlack.main",
3949
- margin: "0 15px"
3950
- }, "Sort")), /*#__PURE__*/React__default['default'].createElement(ChevronRightRoundedIcon__default['default'], {
3951
- sx: {
3952
- color: "notBlack.main"
3953
- }
3954
- }))))));
3955
- };
3956
-
3957
- 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; }
3958
-
3959
- 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; }
3960
-
3961
- var UserLibraryHeader = function UserLibraryHeader(_ref) {
3962
- var sx = _ref.sx,
3963
- tabs = _ref.tabs,
3964
- tabSelection = _ref.tabSelection,
3965
- setTabSelection = _ref.setTabSelection,
3966
- setShowSearch = _ref.setShowSearch,
3967
- setSearchTerm = _ref.setSearchTerm,
3968
- searchTerm = _ref.searchTerm,
3969
- setActiveBoard = _ref.setActiveBoard,
3970
- hideSearch = _ref.hideSearch,
3971
- _setSort = _ref.setSort,
3972
- sort = _ref.sort,
3973
- hideLayoutButtons = _ref.hideLayoutButtons;
3974
- var size = useWindowSize();
3975
- var theme = React.useContext(styled.ThemeContext);
3976
- return /*#__PURE__*/React__default['default'].createElement(Box, {
3977
- sx: _objectSpread({
3978
- backgroundColor: "grey2.main",
3979
- position: "sticky",
3980
- top: size.width >= 1000 ? "80px" : "110px",
3981
- zIndex: "5"
3982
- }, sx)
3983
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3984
- direction: "row",
3985
- style: {
3986
- padding: "20px 10px",
3987
- maxWidth: "1300px",
3988
- margin: "0 auto",
3989
- width: "95%"
3990
- }
3991
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3992
- direction: "row",
3993
- width: "100%",
3994
- justifyContent: size.width <= 675 ? "center" : "space-between",
3995
- alignItems: "center",
3996
- flexWrap: "wrap"
3997
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3998
- direction: "row"
3999
- }, tabs === null || tabs === void 0 ? void 0 : tabs.map(function (tab) {
4000
- return /*#__PURE__*/React__default['default'].createElement(Button, {
4001
- key: "tab-".concat(tab),
4002
- onClick: function onClick() {
4003
- setShowSearch(null);
4004
- setActiveBoard(null);
4005
- setTabSelection(tab);
4006
- },
4007
- variant: "outlined",
4008
- size: "small",
4009
- sx: {
4010
- marginRight: "10px",
4011
- backgroundColor: tabSelection === tab && "grey3.main",
4012
- ":focus": {
4013
- border: "2px solid ".concat(theme.colors.grey4, " !important")
4014
- }
4015
- },
4016
- color: "grey6"
4017
- }, tab);
4018
- })), /*#__PURE__*/React__default['default'].createElement(LibraryControls, {
4019
- currentSort: sort,
4020
- setActiveBoard: setActiveBoard,
4021
- setSort: function setSort(value) {
4022
- _setSort(value); // refetch({ variables: options });
4023
-
4024
- },
4025
- searchTerm: searchTerm,
4026
- hideSearch: hideSearch,
4027
- setSearchTerm: setSearchTerm,
4028
- setShowSearch: setShowSearch,
4029
- hideLayoutButtons: hideLayoutButtons
4030
- }))));
4031
- };
4032
-
4033
- var _templateObject;
4034
- var ReactionButton = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n transition: 0.2s;\n margin-right: 0;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
4035
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
4036
- }, function (props) {
4037
- return props.theme.colors.ibisRed;
4038
- });
4039
- var reactionIconUrls = {
4040
- FUNNY: "https://storage.googleapis.com/blerp_products/Icons/Funny%403x.svg",
4041
- HAPPY: "https://storage.googleapis.com/blerp_products/Icons/Happy%403x.svg",
4042
- SCARY: "https://storage.googleapis.com/blerp_products/Icons/Scary%403x.svg",
4043
- SHOCKED: "https://storage.googleapis.com/blerp_products/Icons/Shock.svg",
4044
- TROLL: "https://storage.googleapis.com/blerp_products/Icons/Troll%403x.svg",
4045
- ANGRY: "https://storage.googleapis.com/blerp_products/Icons/Anger%403x.svg",
4046
- NSFW: "https://storage.googleapis.com/blerp_products/Icons/NSFW%403x.svg",
4047
- MUSIC: "https://storage.googleapis.com/blerp_products/Icons/Music%403x.svg"
4048
- };
4049
-
4050
- var ReactionButtons = function ReactionButtons(_ref) {
4051
- var bite = _ref.bite,
4052
- handleClick = _ref.handleClick;
4053
- return /*#__PURE__*/React__default['default'].createElement(Grid, {
4054
- display: "grid",
4055
- gridTemplateColumns: "repeat(4, 1fr)",
4056
- alignItems: "center",
4057
- marginTop: "16px",
4058
- gap: 1
4059
- }, Object.keys(reactionIconUrls).map(function (reaction) {
4060
- var _bite$userReactions, _bite$userReactions$r;
4061
-
4062
- return /*#__PURE__*/React__default['default'].createElement(Grid, {
4063
- key: "".concat(reaction, "-button"),
4064
- gridColumn: "span 1",
4065
- display: "flex",
4066
- justifyContent: "center"
4067
- }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
4068
- title: reaction
4069
- }, /*#__PURE__*/React__default['default'].createElement(ReactionButton, {
4070
- active: bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : (_bite$userReactions$r = _bite$userReactions.reactions) === null || _bite$userReactions$r === void 0 ? void 0 : _bite$userReactions$r.includes(reaction),
4071
- onClick: function onClick() {
4072
- var _bite$userReactions2, _bite$userReactions2$;
4073
-
4074
- var isRemove = bite === null || bite === void 0 ? void 0 : (_bite$userReactions2 = bite.userReactions) === null || _bite$userReactions2 === void 0 ? void 0 : (_bite$userReactions2$ = _bite$userReactions2.reactions) === null || _bite$userReactions2$ === void 0 ? void 0 : _bite$userReactions2$.includes(reaction);
4075
- handleClick(reaction, isRemove);
4076
- }
4077
- }, /*#__PURE__*/React__default['default'].createElement("img", {
4078
- alt: "reaction-".concat(reaction),
4079
- width: "100%",
4080
- height: "100%",
4081
- src: reactionIconUrls[reaction]
4082
- }))));
4083
- }));
4084
- };
4085
-
4086
- var Theme = BlerpTheme;
4087
- var Box = material.Box;
4088
- var Container = material.Container;
4089
- var Grid = material.Grid;
4090
- var Stack = material.Stack;
4091
- var ImageList = material.ImageList;
4092
- var Autocomplete = material.Autocomplete;
4093
- var Button = material.Button;
4094
- var ButtonGroup = material.ButtonGroup;
4095
- var Checkbox = material.Checkbox;
4096
- var FloatingActionButton = material.Fab;
4097
- var RadioButton = material.Radio;
4098
- var Rating = material.Rating;
4099
- var Select = material.Select;
4100
- var Slider = material.Slider;
4101
- var Switch = material.Switch;
4102
- var Input = material.TextField;
4103
- var BottomNavigation = material.BottomNavigation;
4104
- var Breadcrumbs = material.Breadcrumbs;
4105
- var Drawer = material.Drawer;
4106
- var Link = material.Link;
4107
- var Menu = material.Menu;
4108
- var Pagination = material.Pagination;
4109
- var SpeedDial = material.SpeedDial;
4110
- var Stepper = material.Stepper;
4111
- var Tabs = material.Tabs;
4112
- var Accordion = material.Accordion;
4113
- var AppBar = material.AppBar;
4114
- var Card = material.Card;
4115
- var Paper = material.Paper;
4116
- var Alert = material.Alert;
4117
- var Backdrop = material.Backdrop;
4118
- var Dialog = material.Dialog;
4119
- var LinearProgress = material.LinearProgress;
4120
- var Skeleton = material.Skeleton;
4121
- var Snackbar = material.Snackbar;
4122
- var Avatar = material.Avatar;
4123
- var Badge = material.Badge;
4124
- var Chip = material.Chip;
4125
- var Divider = material.Divider;
4126
- var List = material.List;
4127
- var Table = material.Table;
4128
- var Tooltip = material.Tooltip;
4129
- var Toolbar = material.Toolbar;
4130
- var Text = material.Typography;
4131
- var Modal = material.Modal;
4132
- var Popover = material.Popover;
4133
- var Blerp = Blerp$1;
4134
- var IconButton = material.IconButton;
4135
- var Toggle = Toggle$1;
4136
- var Dropdown = Dropdown$1;
4137
- var MenuItem = material.MenuItem;
4138
- var NewCollectionModal = NewCollectionModal$1;
4139
- var CollectionCard = CollectionCard$1;
4140
- var BlerpListView = BlerpListView$1;
4141
- var BlerpSkeleton = BlerpSkeleton$1;
4142
- var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
4143
- var CollectionSkeleton = CollectionSkeleton$1;
4144
- var InputAdornment = material.InputAdornment; // export const BlerpContextMenu = MBlerpContextMenu;
4145
- // export const ListItem = MListItem;
4146
- // // export const ListItemText = MListItemText;
4147
- // export const ListItemButtonText = MListItemButtonText;
4148
-
4149
- var lightThemeV1 = {
4150
- pandaPink: "#FE295C",
4151
- pandaTeal: "#FE295C",
4152
- pandaNewTeal: "#49bea0",
4153
- darkTeal: "#058063",
4154
- whiteText: "#FFFFFF",
4155
- invertFlyoutBackground: "#170D11",
4156
- flyoutBackground: "#FFFFFF",
4157
- lighterBackground: "#F8F8F8",
4158
- defaultBackground: "#F3F3F3",
4159
- lighterGray: "#BDBDBB",
4160
- iconsActive: "#21000C",
4161
- iconsInActive: "#47463F",
4162
- headerText: "#21000C",
4163
- disabledText: "#BEBEBC",
4164
- lightGray: "#BEBEBC",
4165
- blastZone: "#E1E1E1",
4166
- orangeStatus: "#ff785b",
4167
- darkRedStatus: "#dd1243",
4168
- borderColor: "#bebeb9",
4169
- inputBorderColor: "#bebeb9",
4170
- togglerBackground: "#A04949",
4171
- secondaryText: "#47463F",
4172
- secondarySubtitleText: "#707070",
4173
- biteGray: "#707070",
4174
- secondaryGray: "#706F6B",
4175
- placeholderText: "#BFBFBA",
4176
- activeText: "#21000C",
4177
- primaryText: "#FFFFFF",
4178
- bodyText: "#21000C",
4179
- darkText: "#21000C",
4180
- darkBackground: "#666",
4181
- statusColor: "#DD1243",
4182
- actionBackground: "#E6E6E6",
4183
- focusState: "#27AAFF",
4184
- focusOutline: "#3580B1",
4185
- darkBlue: "#3580B1",
4186
- headerColor: "#170D11",
4187
- headerBackground: "#47463F",
4188
- slidePurple: "#262261",
4189
- lightCloseButton: "https://storage.googleapis.com/blerp-public-images/twitch/white_close_button.svg",
4190
- closeIcon: "https://storage.googleapis.com/blerp-public-images/twitch/dark-close-icon.svg",
4191
- bitCostIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20costLightMode.svg",
4192
- whiteCheckMarkIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/checkmark.svg",
4193
- dgRightArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Right.svg",
4194
- dgDownArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Down.svg",
4195
- dgUpArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Up.svg",
4196
- dgLeftArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Left.svg",
4197
- subStarIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20subLightMode.svg",
4198
- subOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/greySubPlusBitsIconWhite.svg",
4199
- subTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/PurpleSubPlusBitsIconWhite.svg",
4200
- subThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/MintSubPlusBitsIconWhite.svg",
4201
- subFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/BlueSubPlusBitsIconWhite.svg",
4202
- subFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/RedSubPlusBitsIconWhite.svg",
4203
- bitsOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/grey%20bits%20icon%20white%20stroke.svg",
4204
- bitsTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Purple%20bits%20icon%20white%20stroke.svg",
4205
- bitsThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Mint%20bits%20icon%20white%20stroke-2.svg",
4206
- bitsFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20white%20stroke.svg",
4207
- bitsFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20white%20stroke.svg"
4208
- };
4209
- var darkThemeV1 = {
4210
- pandaPink: "#FE295C",
4211
- pandaTeal: "#FE295C",
4212
- pandaNewTeal: "#49bea0",
4213
- darkTeal: "#058063",
4214
- whiteText: "#FFFFFF",
4215
- invertFlyoutBackground: "#FFFFFF",
4216
- flyoutBackground: "#170D11",
4217
- lighterBackground: "#21000C",
4218
- defaultBackground: "#47463F",
4219
- lighterGray: "#BDBDBB",
4220
- iconsActive: "#21000C",
4221
- iconsInActive: "#706F6B",
4222
- headerText: "#21000C",
4223
- disabledText: "#BEBEBC",
4224
- lightGray: "#BEBEBC",
4225
- blastZone: "#E1E1E1",
4226
- orangeStatus: "#ff785b",
4227
- darkRedStatus: "#dd1243",
4228
- borderColor: "#bebeb9",
4229
- inputBorderColor: "#bebeb9",
4230
- togglerBackground: "#A04949",
4231
- secondaryText: "#BDBDBB",
4232
- secondarySubtitleText: "#707070",
4233
- biteGray: "#707070",
4234
- secondaryGray: "#706F6B",
4235
- placeholderText: "#BFBFBA",
4236
- activeText: "#21000C",
4237
- primaryText: "#FFFFFF",
4238
- bodyText: "#FFFFFF",
4239
- darkText: "#FFFFFF",
4240
- darkBackground: "#666",
4241
- statusColor: "#DD1243",
4242
- actionBackground: "#706F6B",
4243
- focusState: "#27AAFF",
4244
- focusOutline: "#27AAFF",
4245
- darkBlue: "#27AAFF",
4246
- headerColor: "#FFF",
4247
- headerBackground: "#47463F",
4248
- slidePurple: "#262261",
4249
- closeIcon: "https://storage.googleapis.com/blerp-public-images/twitch/white_close_button.svg",
4250
- lightCloseButton: "https://storage.googleapis.com/blerp-public-images/twitch/dark-close-icon.svg",
4251
- bitCostIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20costDarkMode.svg",
4252
- whiteCheckMarkIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/checkmark.svg",
4253
- dgRightArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_White_Right.svg",
4254
- dgDownArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_White_Down.svg",
4255
- dgUpArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_White_Up.svg",
4256
- dgLeftArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_White_Left.svg",
4257
- subStarIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20subDarkMode.svg",
4258
- subOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/greySubPlusBitsIconGrey.svg",
4259
- subTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/PurpleSubPlusBitsIconGrey.svg",
4260
- subThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/MintSubPlusBitsIconGrey.svg",
4261
- subFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/BlueSubPlusBitsIconGrey.svg",
4262
- subFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/RedSubPlusBitsIconGrey.svg",
4263
- bitsOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/grey%20bits%20icon%20white%20stroke-2.svg",
4264
- bitsTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Purple%20bits%20icon%20grey%20stroke.svg",
4265
- bitsThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Mint%20bits%20icon%20white%20stroke-1.svg",
4266
- bitsFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20grey%20stroke.svg",
4267
- bitsFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20grey%20stroke.svg"
4268
- };
4269
- var mainTheme = {
4270
- pandaPink: "#FE295C",
4271
- pandaTeal: "#FE295C",
4272
- pandaNewTeal: "#49bea0",
4273
- darkTeal: "#058063",
4274
- whiteText: "#FFFFFF",
4275
- invertFlyoutBackground: "#170D11",
4276
- flyoutBackground: "#FFFFFF",
4277
- lighterBackground: "#F8F8F8",
4278
- defaultBackground: "#F3F3F3",
4279
- lighterGray: "#BDBDBB",
4280
- iconsActive: "#21000C",
4281
- iconsInActive: "#47463F",
4282
- headerText: "#21000C",
4283
- disabledText: "#BEBEBC",
4284
- lightGray: "#BEBEBC",
4285
- blastZone: "#E1E1E1",
4286
- orangeStatus: "#ff785b",
4287
- darkRedStatus: "#dd1243",
4288
- borderColor: "#bebeb9",
4289
- inputBorderColor: "#bebeb9",
4290
- togglerBackground: "#A04949",
4291
- secondaryText: "#47463F",
4292
- secondarySubtitleText: "#707070",
4293
- biteGray: "#707070",
4294
- secondaryGray: "#706F6B",
4295
- placeholderText: "#BFBFBA",
4296
- activeText: "#21000C",
4297
- primaryText: "#FFFFFF",
4298
- bodyText: "#21000C",
4299
- darkBackground: "#666",
4300
- statusColor: "#DD1243",
4301
- actionBackground: "#E6E6E6",
4302
- focusState: "#27AAFF",
4303
- focusOutline: "#3580B1",
4304
- darkBlue: "#3580B1",
4305
- headerColor: "#170D11",
4306
- headerBackground: "#47463F",
4307
- slidePurple: "#262261",
4308
- lightCloseButton: "https://storage.googleapis.com/blerp-public-images/twitch/white_close_button.svg",
4309
- closeIcon: "https://storage.googleapis.com/blerp-public-images/twitch/dark-close-icon.svg",
4310
- bitCostIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20costLightMode.svg",
4311
- whiteCheckMarkIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/checkmark.svg",
4312
- dgRightArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Right.svg",
4313
- dgDownArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Down.svg",
4314
- dgUpArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Up.svg",
4315
- dgLeftArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Left.svg",
4316
- subStarIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20subLightMode.svg",
4317
- subOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/greySubPlusBitsIconWhite.svg",
4318
- subTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/PurpleSubPlusBitsIconWhite.svg",
4319
- subThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/MintSubPlusBitsIconWhite.svg",
4320
- subFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/BlueSubPlusBitsIconWhite.svg",
4321
- subFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/RedSubPlusBitsIconWhite.svg",
4322
- bitsOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/grey%20bits%20icon%20white%20stroke.svg",
4323
- bitsTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Purple%20bits%20icon%20white%20stroke.svg",
4324
- bitsThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Mint%20bits%20icon%20white%20stroke-2.svg",
4325
- bitsFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20white%20stroke.svg",
4326
- bitsFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20white%20stroke.svg"
4327
- };
4328
- var Themes = {
4329
- mainTheme: mainTheme,
4330
- lightThemeV1: lightThemeV1,
4331
- darkThemeV1: darkThemeV1
4332
- }; // return {
4333
- // Box= Box,
4334
- // Container= Container,
4335
- // Grid= Grid,
4336
- // Stack= Stack,
4337
- // ImageList= ImageList,
4338
- // Autocomplete= Autocomplete,
4339
- // Button= Button,
4340
- // ButtonGroup= ButtonGroup,
4341
- // Checkbox= Checkbox,
4342
- // FloatingActionButton= Fab,
4343
- // RadioButton= Radio,
4344
- // Rating= Rating,
4345
- // Select= Select,
4346
- // Slider= Slider,
4347
- // Switch= Switch,
4348
- // Input= TextField,
4349
- // Toggle= ToggleButton,
4350
- // BottomNavigation= BottomNavigation,
4351
- // Breadcrumbs= Breadcrumbs,
4352
- // Drawer= Drawer,
4353
- // Link= Link,
4354
- // Menu= Menu,
4355
- // Pagination= Pagination,
4356
- // SpeedDial= SpeedDial,
4357
- // Stepper= Stepper,
4358
- // Tabs= Tabs,
4359
- // Accordion= Accordion,
4360
- // AppBar= AppBar,
4361
- // Card= Card,
4362
- // Paper= Paper,
4363
- // Alert= Alert,
4364
- // Backdrop= Backdrop,
4365
- // Dialog= Dialog,
4366
- // LinearProgress= LinearProgress,
4367
- // Skeleton= Skeleton,
4368
- // Snackbar= Snackbar,
4369
- // Avatar= Avatar,
4370
- // Badge= Badge,
4371
- // Chip= Chip,
4372
- // Divider= Divider,
4373
- // List= List,
4374
- // Table= Table,
4375
- // Tooltip= Tooltip,
4376
- // Text= Typography,
4377
- // // you can add here other components that you want to export
4378
- // };
4379
- // };
4380
- // export default returnLibrary();
4381
-
4382
- exports.Accordion = Accordion;
4383
- exports.Alert = Alert;
4384
- exports.AppBar = AppBar;
4385
- exports.Autocomplete = Autocomplete;
4386
- exports.Avatar = Avatar;
4387
- exports.Backdrop = Backdrop;
4388
- exports.Badge = Badge;
4389
- exports.Blerp = Blerp;
4390
- exports.BlerpCardIcon = BlerpCardIcon;
4391
- exports.BlerpCoinsIcon = BlerpCoinsIcon;
4392
- exports.BlerpListView = BlerpListView;
4393
- exports.BlerpListViewSkeleton = BlerpListViewSkeleton;
4394
- exports.BlerpSkeleton = BlerpSkeleton;
4395
- exports.BlerpyIcon = BlerpyIcon;
4396
- exports.BookmarkAddRounded = BookmarkAddRounded;
4397
- exports.BottomNavigation = BottomNavigation;
4398
- exports.Box = Box;
4399
- exports.Breadcrumbs = Breadcrumbs;
4400
- exports.Button = Button;
4401
- exports.ButtonGroup = ButtonGroup;
4402
- exports.Card = Card;
4403
- exports.ChannelPointsIcon = ChannelPointsIcon;
4404
- exports.Checkbox = Checkbox;
4405
- exports.Chip = Chip;
4406
- exports.ClockIcon = ClockIcon;
4407
- exports.CogIcon = CogIcon;
4408
- exports.CollectionCard = CollectionCard;
4409
- exports.CollectionSkeleton = CollectionSkeleton;
4410
- exports.Container = Container;
4411
- exports.CrownIcon = CrownIcon;
4412
- exports.Dialog = Dialog;
4413
- exports.DiamondIcon = DiamondIcon;
4414
- exports.DiscordIcon = DiscordIcon;
4415
- exports.Divider = Divider;
4416
- exports.Drawer = Drawer;
4417
- exports.Dropdown = Dropdown;
4418
- exports.FloatingActionButton = FloatingActionButton;
4419
- exports.GiftIcon = GiftIcon;
4420
- exports.Grid = Grid;
4421
- exports.IconButton = IconButton;
4422
- exports.ImageList = ImageList;
4423
- exports.Input = Input;
4424
- exports.InputAdornment = InputAdornment;
4425
- exports.LightbulbIcon = LightbulbIcon;
4426
- exports.LinearProgress = LinearProgress;
4427
- exports.Link = Link;
4428
- exports.List = List;
4429
- exports.Menu = Menu;
4430
- exports.MenuItem = MenuItem;
4431
- exports.Modal = Modal;
4432
- exports.NewCollectionModal = NewCollectionModal;
4433
- exports.Pagination = Pagination;
4434
- exports.Paper = Paper;
4435
- exports.PlayOutlineIcon = PlayOutlineIcon;
4436
- exports.PlaySolidIcon = PlaySolidIcon;
4437
- exports.PointerFingerIcon = PointerFingerIcon;
4438
- exports.Popover = Popover;
4439
- exports.RadarDishIcon = RadarDishIcon;
4440
- exports.RadioButton = RadioButton;
4441
- exports.Rating = Rating;
4442
- exports.ReactionButtons = ReactionButtons;
4443
- exports.Select = Select;
4444
- exports.ShortcutIcon = ShortcutIcon;
4445
- exports.Skeleton = Skeleton;
4446
- exports.Slider = Slider;
4447
- exports.Snackbar = Snackbar;
4448
- exports.SpeedDial = SpeedDial;
4449
- exports.Stack = Stack;
4450
- exports.Stepper = Stepper;
4451
- exports.Switch = Switch;
4452
- exports.Table = Table;
4453
- exports.Tabs = Tabs;
4454
- exports.Text = Text;
4455
- exports.Theme = Theme;
4456
- exports.Themes = Themes;
4457
- exports.Toggle = Toggle;
4458
- exports.Toolbar = Toolbar;
4459
- exports.Tooltip = Tooltip;
4460
- exports.TwitchBitIcon = TwitchBitIcon;
4461
- exports.TwitchIcon = TwitchIcon;
4462
- exports.UnsafeIcon = UnsafeIcon;
4463
- exports.UserLibraryHeader = UserLibraryHeader;
4464
- exports.UserProfileHeader = UserProfileHeader;
4465
- exports.WalkonIcon = WalkonIcon;
4466
- exports.darkThemeV1 = darkThemeV1;
4467
- exports.lightThemeV1 = lightThemeV1;
4468
- exports.mainTheme = mainTheme;