From 3cdb72716ed161f1e421e1bf4a2f8f009e221e00 Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Tue, 18 Jul 2023 15:05:29 -0400
Subject: .

---
 src/client/util/SettingsManager.tsx | 299 +++++++++++++++---------------------
 1 file changed, 127 insertions(+), 172 deletions(-)

(limited to 'src/client/util/SettingsManager.tsx')

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index b6df5f26a..b8e327968 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -17,8 +17,8 @@ import { GroupManager } from './GroupManager';
 import './SettingsManager.scss';
 import { undoBatch } from './UndoManager';
 import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
-import { BsGoogle } from 'react-icons/bs'
-import { FaFillDrip, FaPalette } from 'react-icons/fa'
+import { BsGoogle } from 'react-icons/bs';
+import { FaFillDrip, FaPalette } from 'react-icons/fa';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -26,8 +26,10 @@ export const Flyout = higflyout.default;
 export enum ColorScheme {
     Dark = 'Dark',
     Light = 'Light',
+    CoolBlue = 'Cool Blue',
+    Cupcake = 'Cupcake',
     System = 'Match System',
-    Custom = 'Custom'
+    Custom = 'Custom',
 }
 
 export enum freeformScrollMode {
@@ -78,15 +80,15 @@ export class SettingsManager extends React.Component<{}> {
     };
 
     @computed get userColor() {
-        return StrCast(Doc.UserDoc().userColor)
+        return StrCast(Doc.UserDoc().userColor);
     }
 
     @computed get userVariantColor() {
-        return StrCast(Doc.UserDoc().userVariantColor)
+        return StrCast(Doc.UserDoc().userVariantColor);
     }
 
     @computed get userBackgroundColor() {
-        return StrCast(Doc.UserDoc().userBackgroundColor)
+        return StrCast(Doc.UserDoc().userBackgroundColor);
     }
 
     @undoBatch selectUserMode = action((mode: string) => (Doc.noviceMode = mode === 'Novice'));
@@ -117,14 +119,24 @@ export class SettingsManager extends React.Component<{}> {
         Doc.UserDoc().userTheme = scheme;
         switch (scheme) {
             case ColorScheme.Light:
-                this.switchUserColor("#323232")
-                this.switchUserBackgroundColor("#DFDFDF")
-                this.switchUserVariantColor("#BDDDF5")
+                this.switchUserColor('#323232');
+                this.switchUserBackgroundColor('#DFDFDF');
+                this.switchUserVariantColor('#BDDDF5');
                 break;
             case ColorScheme.Dark:
-                this.switchUserColor("#DFDFDF")
-                this.switchUserBackgroundColor("#323232")
-                this.switchUserVariantColor("#4476F7")
+                this.switchUserColor('#DFDFDF');
+                this.switchUserBackgroundColor('#323232');
+                this.switchUserVariantColor('#4476F7');
+                break;
+            case ColorScheme.CoolBlue:
+                this.switchUserColor('#ADEAFF');
+                this.switchUserBackgroundColor('#060A15');
+                this.switchUserVariantColor('#3C51FF');
+                break;
+            case ColorScheme.Cupcake:
+                this.switchUserColor('#3BC7FF');
+                this.switchUserBackgroundColor('#fffdf7');
+                this.switchUserVariantColor('#FFD7F3');
                 break;
             case ColorScheme.Custom:
                 break;
@@ -138,34 +150,32 @@ export class SettingsManager extends React.Component<{}> {
     });
 
     @computed get colorsContent() {
-
-
-        const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.Custom, ColorScheme.System];
-        const schemeMap = ['Light', 'Dark', 'Custom', 'Match System'];
+        const colorSchemes = [ColorScheme.Light, ColorScheme.Dark, ColorScheme.Cupcake, ColorScheme.CoolBlue, ColorScheme.Custom, ColorScheme.System];
+        const schemeMap = ['Light', 'Dark', 'Cupcake', 'Cool Blue', 'Custom', 'Match System'];
         const userTheme = StrCast(Doc.UserDoc().userTheme);
         return (
-            <div style={{width: '100%'}}>
-                <Dropdown 
-                    formLabel='Theme'
+            <div style={{ width: '100%' }}>
+                <Dropdown
+                    formLabel="Theme"
                     size={Size.SMALL}
                     type={Type.TERT}
                     selectedVal={userTheme}
-                    setSelectedVal={(scheme) => this.changeColorScheme(scheme as string)}
-                    items={colorSchemes.map((scheme, i) => (
-                        {
-                            text: schemeMap[i],
-                            val: scheme
-                        }
-                    ))} 
+                    setSelectedVal={scheme => this.changeColorScheme(scheme as string)}
+                    items={colorSchemes.map((scheme, i) => ({
+                        text: schemeMap[i],
+                        val: scheme,
+                    }))}
                     dropdownType={DropdownType.SELECT}
                     color={this.userColor}
                     fillWidth
                 />
-                {userTheme === ColorScheme.Custom && <Group formLabel='Custom Theme'>
-                    <ColorPicker tooltip={'User Color'} color={this.userColor} type={Type.SEC} icon={<FaFillDrip/>} selectedColor={this.userColor} setSelectedColor={this.switchUserColor}/>
-                    <ColorPicker tooltip={'User Background Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette/>} selectedColor={this.userBackgroundColor} setSelectedColor={this.switchUserBackgroundColor}/>
-                    <ColorPicker tooltip={'User Variant Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette/>} selectedColor={this.userVariantColor} setSelectedColor={this.switchUserVariantColor}/>
-                </Group>}
+                {userTheme === ColorScheme.Custom && (
+                    <Group formLabel="Custom Theme">
+                        <ColorPicker tooltip={'User Color'} color={this.userColor} type={Type.SEC} icon={<FaFillDrip />} selectedColor={this.userColor} setSelectedColor={this.switchUserColor} />
+                        <ColorPicker tooltip={'User Background Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette />} selectedColor={this.userBackgroundColor} setSelectedColor={this.switchUserBackgroundColor} />
+                        <ColorPicker tooltip={'User Variant Color'} color={this.userColor} type={Type.SEC} icon={<FaPalette />} selectedColor={this.userVariantColor} setSelectedColor={this.switchUserVariantColor} />
+                    </Group>
+                )}
             </div>
         );
     }
@@ -173,64 +183,59 @@ export class SettingsManager extends React.Component<{}> {
     @computed get formatsContent() {
         return (
             <div className="prefs-content">
-                <Toggle 
-                    formLabel={'Show document header'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')} 
-                    toggleStatus={Doc.UserDoc().layout_showTitle !== undefined} size={Size.XSMALL}
+                <Toggle
+                    formLabel={'Show document header'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')}
+                    toggleStatus={Doc.UserDoc().layout_showTitle !== undefined}
+                    size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Show Full Toolbar'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])} 
-                    toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])} 
+                <Toggle
+                    formLabel={'Show Full Toolbar'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])}
+                    toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Show Button Labels'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())} 
-                    toggleStatus={FontIconBox.GetShowLabels()} 
+                <Toggle
+                    formLabel={'Show Button Labels'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())}
+                    toggleStatus={FontIconBox.GetShowLabels()}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Recognize Ink Gestures'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())} 
-                    toggleStatus={FontIconBox.GetRecognizeGestures()} 
+                <Toggle
+                    formLabel={'Recognize Ink Gestures'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())}
+                    toggleStatus={FontIconBox.GetRecognizeGestures()}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Hide Labels In Ink Shapes'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)} 
-                    toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)} 
+                <Toggle
+                    formLabel={'Hide Labels In Ink Shapes'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)}
+                    toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
-                <Toggle 
-                    formLabel={'Open Ink Docs in Lightbox'} 
-                    formLabelPlacement={'right'} 
-                    toggleType={ToggleType.SWITCH} 
-                    onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)} 
-                    toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)} 
+                <Toggle
+                    formLabel={'Open Ink Docs in Lightbox'}
+                    formLabelPlacement={'right'}
+                    toggleType={ToggleType.SWITCH}
+                    onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)}
+                    toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)}
                     size={Size.XSMALL}
                     color={this.userColor}
-
                 />
             </div>
         );
@@ -262,29 +267,23 @@ export class SettingsManager extends React.Component<{}> {
                     <div className="tab-column-content">
                         {/* <NumberInput/> */}
                         <Group formLabel={'Default Font'}>
-                            <NumberDropdown 
-                                color={this.userColor} 
-                                numberDropdownType={'input'} 
-                                min={0} max={50} step={2}
-                                type={Type.TERT} 
-                                number={0}
-                                unit={"px"}
-                                setNumber={() => {}}
-                            />
-                            <Dropdown 
-                                items={fontFamilies.map((val) => {
+                            <NumberDropdown color={this.userColor} numberDropdownType={'input'} min={0} max={50} step={2} type={Type.TERT} number={0} unit={'px'} setNumber={() => {}} />
+                            <Dropdown
+                                items={fontFamilies.map(val => {
                                     return {
                                         text: val,
                                         val: val,
                                         style: {
-                                            fontFamily: val
-                                        }
-                                    }
-                                })} 
+                                            fontFamily: val,
+                                        },
+                                    };
+                                })}
                                 dropdownType={DropdownType.SELECT}
                                 type={Type.TERT}
                                 selectedVal={StrCast(Doc.UserDoc().fontFamily)}
-                                setSelectedVal={(val) => {this.changeFontFamily(val as string)}}
+                                setSelectedVal={val => {
+                                    this.changeFontFamily(val as string);
+                                }}
                                 color={this.userColor}
                                 fillWidth
                             />
@@ -313,33 +312,12 @@ export class SettingsManager extends React.Component<{}> {
     @computed get passwordContent() {
         return (
             <div className="password-content">
-                <EditableText placeholder="Current password" 
-                    type={Type.SEC} 
-                    color={this.userColor} 
-                    val={""}
-                    setVal={val => this.changeVal(val as string, 'curr')} 
-                    fillWidth
-                    password
-                />
-                <EditableText placeholder="New password" 
-                    type={Type.SEC} 
-                    color={this.userColor} 
-                    val={""}
-                    setVal={val => this.changeVal(val as string, 'new')} 
-                    fillWidth
-                    password
-                />
-                <EditableText placeholder="Confirm new password" 
-                    type={Type.SEC} 
-                    color={this.userColor} 
-                    val={""}
-                    setVal={val => this.changeVal(val as string, 'conf')} 
-                    fillWidth
-                    password
-                />
+                <EditableText placeholder="Current password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'curr')} fillWidth password />
+                <EditableText placeholder="New password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'new')} fillWidth password />
+                <EditableText placeholder="Confirm new password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'conf')} fillWidth password />
                 {!this.passwordResultText ? null : <div className={`${this.passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this.passwordResultText}</div>}
-                <Button type={Type.SEC} text={'Forgot Password'} color={this.userColor}/>
-                <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={this.userColor}/>
+                <Button type={Type.SEC} text={'Forgot Password'} color={this.userColor} />
+                <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={this.userColor} />
             </div>
         );
     }
@@ -347,7 +325,7 @@ export class SettingsManager extends React.Component<{}> {
     @computed get accountOthersContent() {
         return (
             <div className="account-others-content">
-                <Button type={Type.TERT} text={'Connect to Google'} iconPlacement='left' icon={<BsGoogle/>} onClick={() => this.googleAuthorize()}/>
+                <Button type={Type.TERT} text={'Connect to Google'} iconPlacement="left" icon={<BsGoogle />} onClick={() => this.googleAuthorize()} />
             </div>
         );
     }
@@ -377,59 +355,56 @@ export class SettingsManager extends React.Component<{}> {
                 <div className="tab-column">
                     <div className="tab-column-title">Modes</div>
                     <div className="tab-column-content">
-                        <Dropdown 
-                            formLabel={"Mode"}
+                        <Dropdown
+                            formLabel={'Mode'}
                             items={[
                                 {
                                     text: 'Novice',
                                     description: 'Novice mode is a user-friendly setting designed to cater to those who are new to Dash',
-                                    val: "Novice"
+                                    val: 'Novice',
                                 },
                                 {
                                     text: 'Developer',
-                                    description: 'Developer mode is an advanced setting that grants you greater control and access to the underlying mechanics and tools of a software or system. Developer mode is still under development as there are experimental features.',
-                                    val: "Developer"
+                                    description:
+                                        'Developer mode is an advanced setting that grants you greater control and access to the underlying mechanics and tools of a software or system. Developer mode is still under development as there are experimental features.',
+                                    val: 'Developer',
                                 },
-                            ]} 
+                            ]}
                             selectedVal={Doc.noviceMode ? 'Novice' : 'Developer'}
-                            setSelectedVal={(val) => {this.selectUserMode(val as string)}}
+                            setSelectedVal={val => {
+                                this.selectUserMode(val as string);
+                            }}
                             dropdownType={DropdownType.SELECT}
                             type={Type.TERT}
-                            placement='bottom-start'
+                            placement="bottom-start"
                             color={this.userColor}
                             fillWidth
                         />
-                        <Toggle 
-                            formLabel={'Playground Mode'} 
-                            toggleType={ToggleType.SWITCH} 
-                            toggleStatus={this.playgroundMode} 
-                            onClick={this.playgroundModeToggle}
-                            color={this.userColor}
-                        />
+                        <Toggle formLabel={'Playground Mode'} toggleType={ToggleType.SWITCH} toggleStatus={this.playgroundMode} onClick={this.playgroundModeToggle} color={this.userColor} />
                     </div>
                     <div className="tab-column-title" style={{ marginTop: 20, marginBottom: 10 }}>
                         Freeform Navigation
                     </div>
                     <div className="tab-column-content">
-                        <Dropdown 
-                            formLabel={"Scroll Mode"}
+                        <Dropdown
+                            formLabel={'Scroll Mode'}
                             items={[
                                 {
                                     text: 'Scroll to Pan',
                                     description: 'Scrolling pans canvas, shift + scrolling zooms',
-                                    val: freeformScrollMode.Pan
+                                    val: freeformScrollMode.Pan,
                                 },
                                 {
                                     text: 'Scroll to Zoom',
                                     description: 'Scrolling zooms canvas',
-                                    val: freeformScrollMode.Zoom
+                                    val: freeformScrollMode.Zoom,
                                 },
-                            ]} 
+                            ]}
                             selectedVal={StrCast(Doc.UserDoc().freeformScrollMode)}
-                            setSelectedVal={(val) => this.setFreeformScrollMode(val as string)}
+                            setSelectedVal={val => this.setFreeformScrollMode(val as string)}
                             dropdownType={DropdownType.SELECT}
                             type={Type.TERT}
-                            placement='bottom-start'
+                            placement="bottom-start"
                             color={this.userColor}
                         />
                     </div>
@@ -437,18 +412,8 @@ export class SettingsManager extends React.Component<{}> {
                 <div className="tab-column">
                     <div className="tab-column-title">Permissions</div>
                     <div className="tab-column-content">
-                        <Button
-                            text={"Manage Groups"}
-                            type={Type.TERT}
-                            onClick={() => GroupManager.Instance?.open()}
-                            color={this.userColor}
-                        />
-                        <Toggle 
-                            toggleType={ToggleType.SWITCH} 
-                            formLabel={"Default access private"}
-                            color={this.userColor}
-                            toggleStatus={BoolCast(Doc.defaultAclPrivate)} 
-                            onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}/>
+                        <Button text={'Manage Groups'} type={Type.TERT} onClick={() => GroupManager.Instance?.open()} color={this.userColor} />
+                        <Toggle toggleType={ToggleType.SWITCH} formLabel={'Default access private'} color={this.userColor} toggleStatus={BoolCast(Doc.defaultAclPrivate)} onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))} />
                     </div>
                 </div>
             </div>
@@ -470,45 +435,35 @@ export class SettingsManager extends React.Component<{}> {
                 <div className="settings-panel" style={{ background: this.userColor }}>
                     <div className="settings-tabs">
                         {tabs.map(tab => {
-                            const isActive = this.activeTab === tab.title
+                            const isActive = this.activeTab === tab.title;
                             return (
-                                <div key={tab.title}
+                                <div
+                                    key={tab.title}
                                     style={{
                                         background: isActive ? this.userBackgroundColor : this.userColor,
                                         color: isActive ? this.userColor : this.userBackgroundColor,
                                     }}
-                                    className={'tab-control ' + (isActive ? 'active' : 'inactive')} 
-                                    onClick={action(() => (this.activeTab = tab.title))
-                                }>
+                                    className={'tab-control ' + (isActive ? 'active' : 'inactive')}
+                                    onClick={action(() => (this.activeTab = tab.title))}>
                                     {tab.title}
                                 </div>
-                            )
+                            );
                         })}
                     </div>
 
                     <div className="settings-user">
-                        <div className="settings-username"
-                            style={{color: this.userBackgroundColor}}
-                        >{Doc.CurrentUserEmail}</div>
-                        <Button 
-                            text={Doc.GuestDashboard ? 'Exit' : 'Log Out'}
-                            type={Type.TERT}
-                            color={this.userVariantColor}
-                            onClick={() => window.location.assign(Utils.prepend('/logout'))}
-                        />
+                        <div className="settings-username" style={{ color: this.userBackgroundColor }}>
+                            {Doc.CurrentUserEmail}
+                        </div>
+                        <Button text={Doc.GuestDashboard ? 'Exit' : 'Log Out'} type={Type.TERT} color={this.userVariantColor} onClick={() => window.location.assign(Utils.prepend('/logout'))} />
                     </div>
                 </div>
 
-                            
                 <div className="close-button">
-                    <Button
-                        icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
-                        onClick={this.close}
-                        color={this.userColor}
-                    />
+                    <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={this.userColor} />
                 </div>
 
-                <div className="settings-content" style={{color: this.userColor, background: this.userBackgroundColor}}>
+                <div className="settings-content" style={{ color: this.userColor, background: this.userBackgroundColor }}>
                     {tabs.map(tab => (
                         <div key={tab.title} className={'tab-section ' + (this.activeTab === tab.title ? 'active' : 'inactive')}>
                             {tab.ele}
-- 
cgit v1.2.3-70-g09d2

