Merge branch 'master' into sophie-ai-images

1 files changed, 9 insertions, 7 deletions

diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx
index 6fab0168b..bd586b2f9 100644
--- a/src/client/views/PropertiesSection.tsx
+++ b/src/client/views/PropertiesSection.tsx
@@ -5,10 +5,11 @@ import { observer } from 'mobx-react';
 import './PropertiesSection.scss';
 import { Doc } from '../../fields/Doc';
 import { StrCast } from '../../fields/Types';
+import { SettingsManager } from '../util/SettingsManager';
 
 export interface PropertiesSectionProps {
     title: string;
-    content?: JSX.Element | string | null;
+    children?: JSX.Element | string | null;
     isOpen: boolean;
     setIsOpen: (bool: boolean) => any;
     inSection?: boolean;
@@ -19,21 +20,21 @@ export interface PropertiesSectionProps {
 @observer
 export class PropertiesSection extends React.Component<PropertiesSectionProps> {
     @computed get color() {
-        return StrCast(Doc.UserDoc().userColor);
+        return SettingsManager.userColor;
     }
 
     @computed get backgroundColor() {
-        return StrCast(Doc.UserDoc().userBackgroundColor);
+        return SettingsManager.userBackgroundColor;
     }
 
     @computed get variantColor() {
-        return StrCast(Doc.UserDoc().userVariantColor);
+        return SettingsManager.userVariantColor;
     }
 
     @observable isDouble: boolean = false;
 
     render() {
-        if (this.props.content === undefined || this.props.content === null) return null;
+        if (this.props.children === undefined || this.props.children === null) return null;
         else
             return (
                 <div className="propertiesView-section" onPointerEnter={action(() => this.props.setInSection && this.props.setInSection(true))} onPointerLeave={action(() => this.props.setInSection && this.props.setInSection(false))}>
@@ -49,7 +50,8 @@ export class PropertiesSection extends React.Component<PropertiesSectionProps> {
                             this.props.setIsOpen(!this.props.isOpen);
                         })}
                         style={{
-                            background: this.props.isOpen ? this.variantColor : this.backgroundColor,
+                            background: this.variantColor,
+                            // this.props.isOpen ? this.variantColor : this.backgroundColor,
                             color: this.color,
                         }}>
                         {this.props.title}
@@ -57,7 +59,7 @@ export class PropertiesSection extends React.Component<PropertiesSectionProps> {
                             <FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg" />
                         </div>
                     </div>
-                    {!this.props.isOpen ? null : <div className="propertiesView-content">{this.props.content}</div>}
+                    {!this.props.isOpen ? null : <div className="propertiesView-content">{this.props.children}</div>}
                 </div>
             );
     }