Merge branch 'master' into secondpropertiesmenu-emily

1 files changed, 39 insertions, 17 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index a54c3771f..4a527222c 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -39,6 +39,7 @@ import { DefaultStyleProvider } from './StyleProvider';
 import { DocumentView, OpenWhere, StyleProviderFunc } from './nodes/DocumentView';
 import { KeyValueBox } from './nodes/KeyValueBox';
 import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
+import { SettingsManager } from '../util/SettingsManager';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -1703,50 +1704,71 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             </div>
                         </div>
                         {!selectedItem ? null : (
-                            <div className="propertiesView-presTrails">
-                                <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openPresTransitions = !this.openPresTransitions))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
+                            <div className="propertiesView-presentationTrails">
+                                <div
+                                    className="propertiesView-presentationTrails-title"
+                                    onPointerDown={action(() => (this.openPresTransitions = !this.openPresTransitions))}
+                                    style={{
+                                        color: SettingsManager.Instance.userColor,
+                                        backgroundColor: this.openPresTransitions ? SettingsManager.Instance.userVariantColor : SettingsManager.Instance.userBackgroundColor,
+                                    }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Transitions
-                                    <div className="propertiesView-presTrails-title-icon">
+                                    <div className="propertiesView-presentationTrails-title-icon">
                                         <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" />
                                     </div>
                                 </div>
-                                {this.openPresTransitions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.transitionDropdown}</div> : null}
+                                {this.openPresTransitions ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.transitionDropdown}</div> : null}
                             </div>
                         )}
                         {!selectedItem ? null : (
-                            <div className="propertiesView-presTrails">
+                            <div className="propertiesView-presentationTrails">
                                 <div
-                                    className="propertiesView-presTrails-title"
+                                    className="propertiesView-presentationTrails-title"
                                     onPointerDown={action(() => (this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration))}
-                                    style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
+                                    style={{
+                                        color: SettingsManager.Instance.userColor,
+                                        backgroundColor: this.openPresVisibilityAndDuration ? SettingsManager.Instance.userVariantColor : SettingsManager.Instance.userBackgroundColor,
+                                    }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Visibilty
-                                    <div className="propertiesView-presTrails-title-icon">
+                                    <div className="propertiesView-presentationTrails-title-icon">
                                         <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" />
                                     </div>
                                 </div>
-                                {this.openPresVisibilityAndDuration ? <div className="propertiesView-presTrails-content">{PresBox.Instance.visibiltyDurationDropdown}</div> : null}
+                                {this.openPresVisibilityAndDuration ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.visibiltyDurationDropdown}</div> : null}
                             </div>
                         )}
                         {!selectedItem ? null : (
-                            <div className="propertiesView-presTrails">
-                                <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openPresProgressivize = !this.openPresProgressivize))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
+                            <div className="propertiesView-presentationTrails">
+                                <div
+                                    className="propertiesView-presentationTrails-title"
+                                    onPointerDown={action(() => (this.openPresProgressivize = !this.openPresProgressivize))}
+                                    style={{
+                                        color: SettingsManager.Instance.userColor,
+                                        backgroundColor: this.openPresProgressivize ? SettingsManager.Instance.userVariantColor : SettingsManager.Instance.userBackgroundColor,
+                                    }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Progressivize
-                                    <div className="propertiesView-presTrails-title-icon">
+                                    <div className="propertiesView-presentationTrails-title-icon">
                                         <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" />
                                     </div>
                                 </div>
-                                {this.openPresProgressivize ? <div className="propertiesView-presTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null}
+                                {this.openPresProgressivize ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null}
                             </div>
                         )}
                         {!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? null : (
-                            <div className="propertiesView-presTrails">
-                                <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openSlideOptions = !this.openSlideOptions))} style={{ backgroundColor: this.openSlideOptions ? 'black' : '' }}>
+                            <div className="propertiesView-presentationTrails">
+                                <div
+                                    className="propertiesView-presentationTrails-title"
+                                    onPointerDown={action(() => (this.openSlideOptions = !this.openSlideOptions))}
+                                    style={{
+                                        color: SettingsManager.Instance.userColor,
+                                        backgroundColor: this.openSlideOptions ? SettingsManager.Instance.userVariantColor : SettingsManager.Instance.userBackgroundColor,
+                                    }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} /> &nbsp; {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'}
-                                    <div className="propertiesView-presTrails-title-icon">
+                                    <div className="propertiesView-presentationTrails-title-icon">
                                         <FontAwesomeIcon icon={this.openSlideOptions ? 'caret-down' : 'caret-right'} size="lg" />
                                     </div>
                                 </div>
-                                {this.openSlideOptions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.mediaOptionsDropdown}</div> : null}
+                                {this.openSlideOptions ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.mediaOptionsDropdown}</div> : null}
                             </div>
                         )}
                     </div>