5 files changed, 17 insertions, 5 deletions
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 6d394a38d..c1627e69f 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -52,6 +52,7 @@
     .settings-body {
         display: flex;
         justify-content: space-between;
+        margin-top: -10;
 
         .settings-type {
             display: flex;
@@ -105,6 +106,7 @@
         text-transform: uppercase;
         letter-spacing: 2px;
         font-size: 120%;
+        margin-top: 0;
     }
 
     .container {
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index d54a39943..9d91568cf 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -14,8 +14,9 @@ import { Doc } from "../../fields/Doc";
 import GroupManager from "./GroupManager";
 import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
 import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
+import { togglePlaygroundMode } from "../../fields/util";
 
-library.add(fa.faWindowClose);
+library.add(fa.faTimes);
 
 @observer
 export default class SettingsManager extends React.Component<{}> {
@@ -26,6 +27,7 @@ export default class SettingsManager extends React.Component<{}> {
     @observable private settingsContent = "password";
     @observable private errorText = "";
     @observable private successText = "";
+    @observable private playgroundMode = false;
     private curr_password_ref = React.createRef<HTMLInputElement>();
     private new_password_ref = React.createRef<HTMLInputElement>();
     private new_confirm_ref = React.createRef<HTMLInputElement>();
@@ -95,19 +97,26 @@ export default class SettingsManager extends React.Component<{}> {
         HypothesisAuthenticationManager.Instance.fetchAccessToken(true)
     }
 
+    @action
+    togglePlaygroundMode = () => {
+        togglePlaygroundMode();
+        this.playgroundMode = !this.playgroundMode;
+    }
+
     private get settingsInterface() {
         return (
             <div className={"settings-interface"}>
                 <div className="settings-heading">
                     <h1>settings</h1>
                     <div className={"close-button"} onClick={this.close}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                        <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
                     </div>
                 </div>
                 <div className="settings-body">
                     <div className="settings-type">
                         <button onClick={this.onClick} value="password">reset password</button>
                         <button onClick={this.noviceToggle} value="data">{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
+                        <button onClick={this.togglePlaygroundMode}>{`${this.playgroundMode ? "Disable" : "Enable"} playground mode`}</button>
                         <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
                         <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
                         <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 8d4e508ac..fe7324d5c 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -193,8 +193,6 @@ export default class SharingManager extends React.Component<{}> {
         Doc.GetProto(target)[ACL] = permission;
 
         if (permission !== SharingPermissions.None) {
-            console.log(target);
-            console.log(notificationDoc);
             DocListCastAsync(notificationDoc[storage]).then(resolved => {
                 Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
             });
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8ef367a7c..ac62a67d7 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -12,7 +12,7 @@ import { listSpec } from "../../../fields/Schema";
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
 import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types";
-import { TraceMobx, GetEffectiveAcl, getPlaygroundMode, togglePlaygroundMode } from '../../../fields/util';
+import { TraceMobx, GetEffectiveAcl } from '../../../fields/util';
 import { GestureUtils } from '../../../pen-gestures/GestureUtils';
 import { emptyFunction, OmitKeys, returnOne, returnTransparent, Utils, emptyPath } from "../../../Utils";
 import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils';
diff --git a/src/fields/util.ts b/src/fields/util.ts
index ea4966861..6d2d715bd 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -173,6 +173,9 @@ export function setter(target: any, in_prop: string | symbol | number, value: an
     if (GetEffectiveAcl(target, in_prop) !== AclEdit) {
         return true;
     }
+
+    if (typeof prop === "string" && prop.startsWith("ACL") && !["Can Edit", "Can Add", "Can View", "Not Shared", undefined].includes(value)) return true;
+
     if (typeof prop === "string" && prop !== "__id" && prop !== "__fields" && (prop.startsWith("_") || layoutProps.includes(prop))) {
         if (!prop.startsWith("_")) {
             console.log(prop + " is deprecated - switch to _" + prop);