solid-ui 2.4.28-69262fe5 → 2.4.28-6acecd56

package/dist/solid-ui.js

@@ -7134,6 +7134,15 @@ function renderScopeHeadingRow(context, store, scope) {
 function registrationList(_x9, _x10) {
   return _registrationList.apply(this, arguments);
 } // registrationList
+/**
+ * Bootstrapping identity
+ * (Called by `loginStatusBox()`)
+ *
+ * @param dom
+ * @param setUserCallback
+ *
+ * @returns
+ */
 function _registrationList() {
   _registrationList = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9(context, options) {
     var dom, div, box, scopes, table, tbody, _iterator2, _step2, scope, headingRow, items, _iterator3, _step3, _loop;
@@ -7265,23 +7274,10 @@ function _registrationList() {
   }));
   return _registrationList.apply(this, arguments);
 }
-function getDefaultSignInButtonStyle() {
-  return 'padding: 1em; border-radius:0.5em; font-size: 100%;';
-}
-
-/**
- * Bootstrapping identity
- * (Called by `loginStatusBox()`)
- *
- * @param dom
- * @param setUserCallback
- *
- * @returns
- */
 function signInOrSignUpBox(dom, setUserCallback) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   options = options || {};
-  var signInButtonStyle = options.buttonStyle || getDefaultSignInButtonStyle();
+  var signInButtonStyle = options.buttonStyle || style.signInAndUpButtonStyle;
   var box = dom.createElement('div');
   var magicClassName = 'SolidSignInOrSignUpBox';
   debug.log('widgets.signInOrSignUpBox');
@@ -7294,7 +7290,7 @@ function signInOrSignUpBox(dom, setUserCallback) {
   box.appendChild(signInPopUpButton);
   signInPopUpButton.setAttribute('type', 'button');
   signInPopUpButton.setAttribute('value', 'Log in');
-  signInPopUpButton.setAttribute('style', "".concat(signInButtonStyle, "background-color: #eef;").concat(style.headerBannerLoginInput));
+  signInPopUpButton.setAttribute('style', "".concat(signInButtonStyle).concat(style.headerBannerLoginInput) + style.signUpBackground);
   _solidLogic.authSession.onLogin(function () {
     var me = _solidLogic.authn.currentUser();
     // const sessionInfo = authSession.info
@@ -7335,7 +7331,7 @@ function signInOrSignUpBox(dom, setUserCallback) {
   box.appendChild(signupButton);
   signupButton.setAttribute('type', 'button');
   signupButton.setAttribute('value', 'Sign Up for Solid');
-  signupButton.setAttribute('style', "".concat(signInButtonStyle, "background-color: #efe;").concat(style.headerBannerLoginInput));
+  signupButton.setAttribute('style', "".concat(signInButtonStyle).concat(style.headerBannerLoginInput) + style.signInBackground);
   signupButton.addEventListener('click', function (_event) {
     var signupMgr = new _signup.Signup();
     signupMgr.signup().then(function (uri) {
@@ -7503,7 +7499,7 @@ function loginStatusBox(dom) {
     });
   }
   function logoutButton(me, options) {
-    var signInButtonStyle = options.buttonStyle || getDefaultSignInButtonStyle();
+    var signInButtonStyle = options.buttonStyle || style.signInAndUpButtonStyle;
     var logoutLabel = 'WebID logout';
     if (me) {
       var nick = _solidLogic.solidLogicSingleton.store.any(me, ns.foaf('nick')) || _solidLogic.solidLogicSingleton.store.any(me, ns.foaf('name'));
@@ -7515,7 +7511,7 @@ function loginStatusBox(dom) {
     // signOutButton.className = 'WebIDCancelButton'
     signOutButton.setAttribute('type', 'button');
     signOutButton.setAttribute('value', logoutLabel);
-    signOutButton.setAttribute('style', "".concat(signInButtonStyle, "background-color: #eee;"));
+    signOutButton.setAttribute('style', "".concat(signInButtonStyle));
     signOutButton.addEventListener('click', logoutButtonHandler, false);
     return signOutButton;
   }
@@ -8264,7 +8260,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 //
 // Workflow:
 // The HTML5 functionality (on mobile) is to prompt for either
-// a realtime camera capture, OR a selection from images already not the device
+// a realtime camera capture, OR a selection from images already on the device
 // (eg camera roll).
 //
 // The solid alternative is to either take a photo
@@ -8404,7 +8400,7 @@ function cameraCaptureControl(dom, store, getImageDoc, doneCallback) {
  * @param {function<Node>} doneCallback - called with the image taken
  * @returns {DomElement} - A div element with the button in it
  *
- * This expects the button to a large control when it is pressed
+ * This expands the button to a large control when it is pressed
  */
 
 function cameraButton(dom, store, getImageDoc, doneCallback) {
@@ -8928,7 +8924,7 @@ function lightColorHash(author) {
 /**  notepad
  *
  * @param {HTMLDocument} dom - the web page of the browser
- * @param {NamedNode} padDoc - the document into which the participation should be shown
+ * @param {NamedNode} padDoc - the document in which the participation should be shown
  * @param {NamedNode} subject - the thing in which participation is happening
  * @param {NamedNode} me - person who is logged into the pod
  * @param {notepadOptions} options - the options that can be passed in consist of statusArea, exists
@@ -9112,7 +9108,7 @@ function notepad(dom, padDoc, subject, me, options) {
                 // contents need to be sent again
                 part.state = 4; // delete me
                 return;
-              case 3: // being deleted already
+              case 3: // already being deleted
               case 4:
                 // already deleted state
                 return;
@@ -9659,6 +9655,7 @@ var _widgets = __webpack_require__(/*! ./widgets */ "./lib/widgets/index.js");
 var _utils = __webpack_require__(/*! ./utils */ "./lib/utils/index.js");
 var _pad = __webpack_require__(/*! ./pad */ "./lib/pad.js");
 var style = _interopRequireWildcard(__webpack_require__(/*! ./style */ "./lib/style.js"));
+var _styleConstants = _interopRequireDefault(__webpack_require__(/*! ./styleConstants */ "./lib/styleConstants.js"));
 var _solidLogic = __webpack_require__(/*! solid-logic */ "./node_modules/solid-logic/lib/index.js");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -9691,7 +9688,7 @@ var store = _solidLogic.solidLogicSingleton.store;
 *  @param {NamedNode} unused1/document - the document to render (this argument is no longer used, but left in for backwards compatibility)
 *  @param {NamedNode} subject - the thing in which the participation is happening
 *  @param {NamedNode} unused2/me - user that is logged into the pod (this argument is no longer used, but left in for backwards compatibility)
-*  @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable these are used by the personTR button
+*  @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable; these are used by the personTR button
 */
 function renderParticipants(dom, table, unused1, subject, unused2, options) {
   table.setAttribute('style', style.participantsStyle);
@@ -9703,7 +9700,7 @@ function renderParticipants(dom, table, unused1, subject, unused2, options) {
       tr.textContent = '???'; // Don't crash - invalid part'n entry
       return tr;
     }
-    var bg = store.anyValue(parp, ns.ui('backgroundColor')) || 'white';
+    var bg = store.anyValue(parp, ns.ui('backgroundColor')) || _styleConstants["default"].participationDefaultBackground;
     var block = dom.createElement('div');
     block.setAttribute('style', style.participantsBlock);
     block.style.backgroundColor = bg;
@@ -9837,7 +9834,7 @@ function recordParticipation(subject, padDoc, refreshable) {
 *   @param {NamedNode} document - the document into which the participation should be shown
 *   @param {NamedNode} subject - the thing in which participation is happening
 *   @param {NamedNode} me - the logged in user
-*   @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable these are used by the personTR button
+*   @param {ParticipationOptions} options - the options that can be passed in are deleteFunction, link, and draggable; these are used by the personTR button
 *
 */
 function manageParticipation(dom, container, padDoc, subject, me, options) {
@@ -10242,14 +10239,14 @@ var style = {
   // styleModule
 
   checkboxStyle: 'color: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
-  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',
+  checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em;',
   fieldLabelStyle: 'color: #3B5998; text-decoration: none;',
-  formSelectStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.4em;',
-  textInputStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c;  border-radius:0.2em; font-size: 100%; margin:0.4em;',
+  formSelectStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;',
+  textInputStyle: 'background-color: #eef; padding: 0.5em;  border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;',
   textInputStyleUneditable:
   // Color difference only
-  'background-color: white; padding: 0.5em;  border: .05em solid white;  border-radius:0.2em; font-size: 100%; margin:0.4em;',
-  buttonStyle: 'background-color: #fff; padding: 0.7em;  border: .01em solid white;  border-radius:0.2em; font-size: 100%; margin: 0.3em;',
+  'background-color: white; padding: 0.5em;  border: .05em solid white; border-radius:0.2em; font-size: 100%; margin:0.4em;',
+  buttonStyle: 'background-color: #fff; padding: 0.7em;  border: .01em solid white; border-radius:0.2em; font-size: 100%; margin: 0.3em;',
   // 'background-color: #eef;
   commentStyle: 'padding: 0.7em;  border: none; font-size: 100%; white-space: pre-wrap;',
   iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
@@ -10264,9 +10261,11 @@ var style = {
   searchInputStyle: 'border: 0.1em solid #444; border-radius: 0.2em; width: 100%; font-size: 100%; padding: 0.1em 0.6em; margin 0.2em;',
   autocompleteRowStyle: 'border: 0.2em solid straw;',
   // Login buttons
-  signInButtonStyle: 'padding: 1em; border-radius:0.2em; font-size: 100%;',
+  signInAndUpButtonStyle: 'padding: 1em; border-radius:0.2em; font-size: 100%;',
   // was 0.5em radius
-
+  headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important;',
+  signUpBackground: 'background-color: #eef;',
+  signInBackground: 'background-color: #efe;',
   // Forms
   heading1Style: 'font-size: 180%; font-weight: bold; color: #888888; padding: 0.5em; margin: 0.7em 0.0m;',
   // originally was brown; now grey
@@ -10284,7 +10283,7 @@ var style = {
   formGroupStyle: ["padding-left: 0em; border: 0.0em solid ".concat(_styleConstants["default"].formBorderColor, "; border-radius: 0.2em;"), // weight 0
   "padding-left: 2em; border: 0.05em solid ".concat(_styleConstants["default"].formBorderColor, "; border-radius: 0.2em;"), "padding-left: 2em; border: 0.1em solid ".concat(_styleConstants["default"].formBorderColor, "; border-radius: 0.2em;"), "padding-left: 2em; border: 0.2em solid ".concat(_styleConstants["default"].formBorderColor, "; border-radius: 0.2em;") // @@ pink
   ],
-  formFieldLabelStyle: "'color: ".concat(_styleConstants["default"].lowProfileLinkColor, "; text-decoration: none;'"),
+  formFieldLabelStyle: "color: ".concat(_styleConstants["default"].lowProfileLinkColor, "; text-decoration: none;"),
   formFieldNameBoxStyle: "padding: 0.3em; vertical-align: middle; width:".concat(_styleConstants["default"].formFieldNameBoxWidth, ";"),
   multilineTextInputStyle: 'font-size:100%; white-space: pre-wrap; background-color: #eef;' + ' border: 0.07em solid gray; padding: 1em 0.5em; margin: 1em 1em;',
   // Buttons
@@ -10292,63 +10291,62 @@ var style = {
   imageDivStyle: 'width:2.5em; padding:0.5em; height: 2.5em;',
   linkDivStyle: 'width:2em; padding:0.5em; height: 4em;',
   // ACL
-  aclControlBoxContainer: 'margin: 1em',
-  aclControlBoxHeader: 'font-size: 120%; margin: 0 0 1rem',
-  aclControlBoxStatus: 'display: none; margin: 1rem 0',
-  aclControlBoxStatusRevealed: 'display: block',
-  aclGroupContent: 'maxWidth: 650',
-  accessGroupList: 'display: grid; grid-template-columns: 1fr; margin: 1em; width: 100%',
-  accessGroupListItem: 'display: grid; grid-template-columns: 100px auto 30%',
-  defaultsController: 'display: flex',
-  defaultsControllerNotice: 'color: #888; flexGrow: 1; fontSize: 80%',
-  bigButton: 'background-color: white; border: 0.1em solid #888; border-radius: 0.3em; max-width: 50%; padding-bottom: 1em; padding-top: 1em',
-  group: 'color: #888',
-  group1: 'color: green',
-  group2: 'color: #cc0',
-  group3: 'color: orange',
-  group5: 'color: red',
-  group9: 'color: blue',
-  group13: 'color: purple',
-  trustedAppAddApplicationsTable: 'background-color: #eee',
-  trustedAppCancelButton: 'float: right',
-  trustedAppControllerI: 'border-color: orange; borderRadius: 1em; borderWidth: 0.1em',
-  temporaryStatusInit: 'background: green',
-  temporaryStatusEnd: 'background: transparent; transition: background 5s linear',
+  aclControlBoxContainer: 'margin: 1em;',
+  aclControlBoxHeader: 'font-size: 120%; margin: 0 0 1rem;',
+  aclControlBoxStatus: 'display: none; margin: 1rem 0;',
+  aclControlBoxStatusRevealed: 'display: block;',
+  aclGroupContent: 'maxWidth: 650;',
+  accessGroupList: 'display: grid; grid-template-columns: 1fr; margin: 1em; width: 100%;',
+  accessGroupListItem: 'display: grid; grid-template-columns: 100px auto 30%;',
+  defaultsController: 'display: flex;',
+  defaultsControllerNotice: 'color: #888; flexGrow: 1; fontSize: 80%;',
+  bigButton: 'background-color: white; border: 0.1em solid #888; border-radius: 0.3em; max-width: 50%; padding-bottom: 1em; padding-top: 1em;',
+  group: 'color: #888;',
+  group1: 'color: green;',
+  group2: 'color: #cc0;',
+  group3: 'color: orange;',
+  group5: 'color: red;',
+  group9: 'color: blue;',
+  group13: 'color: purple;',
+  trustedAppAddApplicationsTable: 'background-color: #eee;',
+  trustedAppCancelButton: 'float: right;',
+  trustedAppControllerI: 'border-color: orange; border-radius: 1em; border-width: 0.1em;',
+  temporaryStatusInit: 'background: green;',
+  temporaryStatusEnd: 'background: transparent; transition: background 5s linear;',
   // header
-  headerUserMenuLink: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none',
-  headerUserMenuLinkHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
-  headerUserMenuTrigger: 'background: none; border: 0; cursor: pointer; width: 60px; height: 60px',
-  headerUserMenuTriggerImg: 'border-radius: 50%; height: 56px; width: 28px !important',
-  headerUserMenuButton: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%',
-  headerUserMenuButtonHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
-  headerUserMenuList: 'list-style: none; margin: 0; padding: 0',
-  headerUserMenuListDisplay: 'list-style: none; margin: 0; padding: 0; display:true',
-  headerUserMenuNavigationMenu: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: true',
-  headerUserMenuNavigationMenuNotDisplayed: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: none',
-  headerUserMenuListItem: 'border-bottom: solid 1px #000000',
-  headerUserMenuPhoto: 'border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; height: 50px; width: 50px',
-  headerBanner: 'box-shadow: 0px 1px 4px #000000; display: flex; justify-content: space-between; padding: 0 1.5em; margin-bottom: 4px',
-  headerBannerLink: 'display: block',
-  headerBannerRightMenu: 'display: flex',
-  headerBannerLogin: 'margin-left: auto',
-  allChildrenVisible: 'display:true',
-  headerBannerLoginInput: 'margin: 0.75em 0 0.75em 0.5em !important; padding: 0.5em !important',
-  headerBannerUserMenu: 'border-left: solid 1px #000000; margin-left: auto',
-  headerBannerHelpMenu: 'border-left: solid 1px #000000; margin.left: auto',
-  headerBannerIcon: 'background-size: 65px 60px !important; height: 60px !important; width: 65px !important',
+  headerUserMenuLink: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none;',
+  headerUserMenuLinkHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em;  width: 100%; text-decoration: none; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);',
+  headerUserMenuTrigger: 'background: none; border: 0; cursor: pointer; width: 60px; height: 60px;',
+  headerUserMenuTriggerImg: 'border-radius: 50%; height: 56px; width: 28px !important;',
+  headerUserMenuButton: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%;',
+  headerUserMenuButtonHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);',
+  headerUserMenuList: 'list-style: none; margin: 0; padding: 0;',
+  headerUserMenuListDisplay: 'list-style: none; margin: 0; padding: 0; display:true;',
+  headerUserMenuNavigationMenu: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: true;',
+  headerUserMenuNavigationMenuNotDisplayed: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: none;',
+  headerUserMenuListItem: 'border-bottom: solid 1px #000000;',
+  headerUserMenuPhoto: 'border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; height: 50px; width: 50px;',
+  headerBanner: 'box-shadow: 0px 1px 4px #000000; display: flex; justify-content: space-between; padding: 0 1.5em; margin-bottom: 4px;',
+  headerBannerLink: 'display: block;',
+  headerBannerRightMenu: 'display: flex;',
+  headerBannerLogin: 'margin-left: auto;',
+  allChildrenVisible: 'display:true;',
+  headerBannerUserMenu: 'border-left: solid 1px #000000; margin-left: auto;',
+  headerBannerHelpMenu: 'border-left: solid 1px #000000; margin-left: auto;',
+  headerBannerIcon: 'background-size: 65px 60px !important; height: 60px !important; width: 65px !important;',
   // may just be 65px round($icon-size * 352 / 322);
 
   // footer
-  footer: 'border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em',
+  footer: 'border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em;',
   // buttons
-  primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
-  primaryButtonHover: 'background-color: #9f7dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
-  primaryButtonNoBorder: 'background-color: #ffffff; color: #7c4dff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
-  primaryButtonNoBorderHover: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
-  secondaryButton: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
-  secondaryButtonHover: 'background-color: #37cde6; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
-  secondaryButtonNoBorder: 'background-color: #ffffff; color: #01c9ea; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
-  secondaryButtonNoBorderHover: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
+  primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
+  primaryButtonHover: 'background-color: #9f7dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
+  primaryButtonNoBorder: 'background-color: #ffffff; color: #7c4dff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
+  primaryButtonNoBorderHover: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
+  secondaryButton: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
+  secondaryButtonHover: 'background-color: #37cde6; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
+  secondaryButtonNoBorder: 'background-color: #ffffff; color: #01c9ea; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
+  secondaryButtonNoBorderHover: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
   // media
   controlStyle: "border-radius: 0.5em; margin: 0.8em; width:".concat(_styleConstants["default"].mediaModuleCanvasWidth, "; height:").concat(_styleConstants["default"].mediaModuleCanvasHeight, ";"),
   // dragAndDrop
@@ -10360,8 +10358,8 @@ var style = {
   errorMessageBlockStyle: 'margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; color:black;',
   // pad
   notepadStyle: 'padding: 1em; overflow: auto; resize: horizontal; min-width: 40em;',
-  upstreamStatus: 'width:50%',
-  downstreamStatus: 'width:50%',
+  upstreamStatus: 'width: 50%;',
+  downstreamStatus: 'width: 50%;',
   baseStyle: 'font-size: 100%; font-family: monospace; width: 100%; border: none; white-space: pre-wrap;',
   headingCore: 'font-family: sans-serif; font-weight: bold;  border: none;',
   headingStyle: ['font-size: 110%; padding-top: 0.5em; padding-bottom: 0.5em; width: 100%;', 'font-size: 120%; padding-top: 1em; padding-bottom: 1em; width: 100%;', 'font-size: 150%; padding-top: 1em; padding-bottom: 1em; width: 100%;'],
@@ -10374,7 +10372,7 @@ var style = {
   tabsRootElement: 'display: flex; height: 100%; width: 100%;',
   tabsMainElement: 'margin: 0; width:100%; height: 100%;',
   tabContainer: 'list-style-type: none; display: flex; height: 100%; width: 100%; margin: 0; padding: 0;',
-  makeNewSlot: 'background: none; border: none; font: inherit; cursor: pointer',
+  makeNewSlot: 'background: none; border: none; font: inherit; cursor: pointer;',
   ellipsis: 'position: absolute; right: 0; bottom: 0; width: 20%; background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;'
 };
 exports.style = style;
@@ -10417,13 +10415,15 @@ var _default = {
   mediaModuleCanvasWidth: '640',
   mediaModuleCanvasHeight: '480',
   textInputSize: 20,
-  // Default text input size in characters roughly
+  // Rough default text input size, in characters
   tabBorderRadius: '0.2em',
   textInputBackgroundColor: '#eef',
   textInputBackgroundColorUneditable: '#fff',
   textInputColor: '#000',
   textInputColorPending: '#888',
-  defaultErrorBackgroundColor: '#fee'
+  defaultErrorBackgroundColor: '#fee',
+  participationDefaultBackground: 'white',
+  basicMaxLength: '4096'
 };
 exports["default"] = _default;
 //# sourceMappingURL=styleConstants.js.map
@@ -13706,8 +13706,8 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports.versionInfo = void 0;
 var versionInfo = {
-  buildTime: '2023-07-01T18:56:58Z',
-  commit: '69262fe5c4176380c506b5e146e8fbc0cff58c12',
+  buildTime: '2023-08-16T08:07:53Z',
+  commit: '6acecd56300c8f2aeab15d3da2f6d11f83a0653d',
   npmInfo: {
     'solid-ui': '2.4.28',
     npm: '8.19.4',
@@ -15152,19 +15152,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /* Drag and drop common functionality
  *
  * It is easy to make something draggable, or to make it a drag target!
- * Just call the functions below. In a solid world, any part of the UI which
- * represent one thing which has a URI, should be made draggable using makeDraggable
+ * Just call the functions below. In a Solid world, any part of the UI which
+ * represents one thing which has a URI, should be made draggable using makeDraggable.
  * Any list of things should typically allow you to drag new members of the list
  * onto it.
- * The file upload function uploadFiles is provided as often as someone drags a file from the computer
- * desktop, you may want to upload it into the pod.
+ * The file upload function, uploadFiles, is provided as often as someone drags a file from the computer
+ * desktop. You may want to upload it into the pod.
  */
 
 /* global FileReader alert */
 
 function makeDropTarget(ele, droppedURIHandler, droppedFileHandler) {
   var dragoverListener = function dragoverListener(e) {
-    e.preventDefault(); // Need else drop does not work [sic]
+    e.preventDefault(); // Need this; otherwise, drop does not work.
     e.dataTransfer.dropEffect = 'copy';
   };
   var dragenterListener = function dragenterListener(e) {
@@ -19454,7 +19454,7 @@ function basicField(dom, container, already, subject, form, doc, callbackFunctio
   var size = kb.anyJS(form, ns.ui('size')) || _styleConstants["default"].textInputSize || 20;
   field.setAttribute('size', size);
   var maxLength = kb.any(form, ns.ui('maxLength'));
-  field.setAttribute('maxLength', maxLength ? '' + maxLength : '4096');
+  field.setAttribute('maxLength', maxLength ? '' + maxLength : _styleConstants["default"].basicMaxLength);
   doc = doc || fieldStore(subject, property, doc);
   var obj = kb.any(subject, property, undefined, doc);
   if (!obj) {