theming

6 files changed, 111 insertions, 164 deletions

diff --git a/package-lock.json b/package-lock.json
index 932008e73..54493e5a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24834,7 +24834,7 @@
         "to-fast-properties": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+            "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
         },
         "to-object-path": {
             "version": "0.3.0",
diff --git a/src/client/theme.ts b/src/client/theme.ts
index 0ef2e5e2c..e69de29bb 100644
--- a/src/client/theme.ts
+++ b/src/client/theme.ts
@@ -1,31 +0,0 @@
-import '@mui/material/styles';
-import { createTheme } from '@mui/material/styles';
-
-export const theme = createTheme({
-    palette: {
-        primary: {
-            main: '#4476f7',
-        },
-    },
-    components: {
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    fontSize: '14px',
-                    boxShadow: 'none',
-                    '&:hover': {
-                        boxShadow: 'none',
-                    },
-                },
-            },
-        },
-
-        MuiTooltip: {
-            styleOverrides: {
-                tooltip: {
-                    fontSize: '12px',
-                },
-            },
-        },
-    },
-});
diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss
index 81af41cb0..f1ae6c387 100644
--- a/src/client/util/reportManager/ReportManager.scss
+++ b/src/client/util/reportManager/ReportManager.scss
@@ -2,8 +2,8 @@
 
 // header
 
-$text-gray: #64748b;
-$outline-gray: #cbd5e1;
+$text-gray: #555555;
+$outline-gray: #9c9c9c;
 
 .report-header {
     display: flex;
@@ -41,14 +41,14 @@ $outline-gray: #cbd5e1;
     display: flex;
     flex-direction: column;
     gap: 16px;
-    background-color: #ffffff;
+    // background-color: #ffffff;
     text-align: left;
     position: relative;
 
     .report-label {
         font-size: 14px;
         font-weight: 400;
-        color: $text-gray;
+        // color: $text-gray;
     }
 
     .report-section {
@@ -61,6 +61,7 @@ $outline-gray: #cbd5e1;
         height: 80px;
         padding: 8px;
         resize: vertical;
+        background: transparent;
         // resize: none;
     }
 
@@ -69,10 +70,12 @@ $outline-gray: #cbd5e1;
         flex-direction: column;
         align-items: stretch;
         gap: 16px;
+        background-color: transparent;
 
         .report-select {
             padding: 8px;
             border-color: $outline-gray;
+            background-color: transparent;
 
             .report-opt {
                 padding: 8px;
@@ -88,6 +91,7 @@ $outline-gray: #cbd5e1;
     padding: 8px;
     padding-left: 0;
     transition: all 0.2s ease;
+    background: transparent;
 
     &:hover {
         border-bottom-color: $text-gray;
@@ -118,7 +122,7 @@ $outline-gray: #cbd5e1;
         display: flex;
         flex-direction: column;
         gap: 16px;
-        background-color: #ffffff;
+        // background-color: #ffffff;
         text-align: left;
         position: relative;
 
@@ -153,7 +157,7 @@ $outline-gray: #cbd5e1;
 .issue-card {
     cursor: pointer;
     padding: 16px;
-    background-color: #ffffff;
+    // background-color: #ffffff;
     border: 1px solid $outline-gray;
     transition: all 0.1s ease;
     display: flex;
@@ -173,7 +177,7 @@ $outline-gray: #cbd5e1;
         cursor: pointer;
         font-size: 14px;
         font-weight: 400;
-        color: $text-gray;
+        // color: $text-gray;
         padding: 0;
         margin: 0;
     }
@@ -206,14 +210,14 @@ $outline-gray: #cbd5e1;
 .dropzone {
     padding: 2rem;
     border-radius: 0.5rem;
-    border: 2px dashed #f1f5f9;
+    border: 2px dashed $outline-gray;
 
     .dropzone-instructions {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 16px;
-        color: $text-gray;
+        // color: $text-gray;
 
         p {
             text-align: center;
@@ -226,7 +230,7 @@ $outline-gray: #cbd5e1;
     margin: 0;
     padding: 0;
     font-size: 14px;
-    color: $text-gray;
+    // color: $text-gray;
     width: 100%;
     overflow-x: auto;
     list-style-type: none;
@@ -251,13 +255,13 @@ $outline-gray: #cbd5e1;
     display: flex;
     flex-direction: column;
     gap: 16px;
-    background-color: #ffffff;
+    // background-color: #ffffff;
     text-align: left;
     position: relative;
     overflow: auto;
 
     .issue-label {
-        color: $text-gray;
+        // color: $text-gray;
 
         .issue-link {
             cursor: pointer;
@@ -273,12 +277,12 @@ $outline-gray: #cbd5e1;
 
     .issue-date {
         font-size: 14px;
-        color: $text-gray;
+        // color: $text-gray;
     }
 
     .issue-content {
         font-size: 14px;
-        color: $text-gray;
+        // color: $text-gray;
     }
 }
 
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index b65ada7ec..7599b8949 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -14,15 +14,19 @@ import { MainViewModal } from '../../views/MainViewModal';
 import { Octokit } from '@octokit/core';
 import { Button, IconButton, OrientationType, Type } from 'browndash-components';
 import Dropzone from 'react-dropzone';
-import { theme } from '../../theme';
 import ReactLoading from 'react-loading';
 import v4 = require('uuid/v4');
 import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils';
 import { IssueCard, IssueView, Tag } from './ReportManagerComponents';
+import { StrCast } from '../../../fields/Types';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
+// StrCast(Doc.UserDoc().userColor);
+// StrCast(Doc.UserDoc().userBackgroundColor);
+// StrCast(Doc.UserDoc().userVariantColor);
+
 /**
  * Class for reporting and viewing Github issues within the app.
  */
@@ -185,19 +189,19 @@ export class ReportManager extends React.Component<{}> {
         }
         const formattedLinks = (links ?? []).map(this.fileLinktoServerLink);
 
-        const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', {
-            owner: 'brown-dash',
-            repo: 'Dash-Web',
-            title: this.formatTitle(this.bugTitle, Doc.CurrentUserEmail),
-            body: `${this.bugDescription} ${formattedLinks.length > 0 && `\n\nFiles:\n${formattedLinks.join('\n')}`}`,
-            labels: ['from-dash-app', this.bugType, this.bugPriority],
-        });
+        // const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', {
+        //     owner: 'brown-dash',
+        //     repo: 'Dash-Web',
+        //     title: this.formatTitle(this.bugTitle, Doc.CurrentUserEmail),
+        //     body: `${this.bugDescription} ${formattedLinks.length > 0 && `\n\nFiles:\n${formattedLinks.join('\n')}`}`,
+        //     labels: ['from-dash-app', this.bugType, this.bugPriority],
+        // });
 
-        // 201 status means success
-        if (req.status !== 201) {
-            alert('Error creating issue on github.');
-            return;
-        }
+        // // 201 status means success
+        // if (req.status !== 201) {
+        //     alert('Error creating issue on github.');
+        //     return;
+        // }
 
         // Reset fields
         this.setBugTitle('');
@@ -365,13 +369,14 @@ export class ReportManager extends React.Component<{}> {
      */
     private viewIssuesComponent = () => {
         return (
-            <div className="view-issues">
+            <div className="view-issues" style={{ backgroundColor: StrCast(Doc.UserDoc().userBackgroundColor) }}>
                 <div className="left" style={{ display: this.rightExpanded ? 'none' : 'flex' }}>
                     <div className="report-header">
-                        <h2>Open Issues</h2>
+                        <h2 style={{ color: StrCast(Doc.UserDoc().userColor) }}>Open Issues</h2>
                         <Button
-                            type={Type.PRIM}
-                            text="report issue"
+                            type={Type.TERT}
+                            color={StrCast(Doc.UserDoc().userVariantColor)}
+                            text="Report Issue"
                             onClick={() => {
                                 this.setViewState(ViewState.CREATE);
                             }}
@@ -394,10 +399,10 @@ export class ReportManager extends React.Component<{}> {
                                     this.setPriorityFilter(null);
                                 }}
                                 fontSize="12px"
-                                backgroundColor={this.priorityFilter === null ? theme.palette.primary.main : '#ffffff'}
-                                color={this.priorityFilter === null ? '#ffffff' : inactiveColor}
+                                backgroundColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
+                                color={this.priorityFilter === null ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
                                 border
-                                borderColor={this.priorityFilter === null ? theme.palette.primary.main : inactiveBorderColor}
+                                borderColor={this.priorityFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
                             />
                             {Object.values(Priority).map(p => {
                                 return (
@@ -408,10 +413,10 @@ export class ReportManager extends React.Component<{}> {
                                             this.setPriorityFilter(p);
                                         }}
                                         fontSize="12px"
-                                        backgroundColor={this.priorityFilter === p ? theme.palette.primary.main : '#ffffff'}
-                                        color={this.priorityFilter === p ? '#ffffff' : inactiveColor}
+                                        backgroundColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
+                                        color={this.priorityFilter === p ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
                                         border
-                                        borderColor={this.priorityFilter === p ? theme.palette.primary.main : inactiveBorderColor}
+                                        borderColor={this.priorityFilter === p ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
                                     />
                                 );
                             })}
@@ -423,10 +428,10 @@ export class ReportManager extends React.Component<{}> {
                                     this.setBugFilter(null);
                                 }}
                                 fontSize="12px"
-                                backgroundColor={this.bugFilter === null ? theme.palette.primary.main : '#ffffff'}
-                                color={this.bugFilter === null ? '#ffffff' : inactiveColor}
+                                backgroundColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
+                                color={this.bugFilter === null ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
                                 border
-                                borderColor={this.bugFilter === null ? theme.palette.primary.main : inactiveBorderColor}
+                                borderColor={this.bugFilter === null ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
                             />
                             {Object.values(BugType).map(b => {
                                 return (
@@ -437,10 +442,10 @@ export class ReportManager extends React.Component<{}> {
                                             this.setBugFilter(b);
                                         }}
                                         fontSize="12px"
-                                        backgroundColor={this.bugFilter === b ? theme.palette.primary.main : '#ffffff'}
-                                        color={this.bugFilter === b ? '#ffffff' : inactiveColor}
+                                        backgroundColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : 'transparent'}
+                                        color={this.bugFilter === b ? StrCast(Doc.UserDoc().userColor) : inactiveColor}
                                         border
-                                        borderColor={this.bugFilter === b ? theme.palette.primary.main : inactiveBorderColor}
+                                        borderColor={this.bugFilter === b ? StrCast(Doc.UserDoc().userVariantColor) : inactiveBorderColor}
                                     />
                                 );
                             })}
@@ -449,7 +454,7 @@ export class ReportManager extends React.Component<{}> {
                     <div className="issues">
                         {this.fetchingIssues ? (
                             <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                                <ReactLoading type="spin" color={theme.palette.primary.main} width={50} height={50} />
+                                <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userColor)} width={50} height={50} />
                             </div>
                         ) : (
                             this.shownIssues
@@ -491,9 +496,10 @@ export class ReportManager extends React.Component<{}> {
             <div className="report-issue">
                 <div className="report-header-vertical">
                     <Button
+                        type={Type.PRIM}
                         text="back to view"
-                        icon={<HiOutlineArrowLeft color={theme.palette.primary.main} />}
-                        iconPosition={OrientationType.LEFT}
+                        icon={<HiOutlineArrowLeft />}
+                        iconPlacement="left"
                         onClick={() => {
                             this.setViewState(ViewState.VIEW);
                         }}
@@ -555,14 +561,26 @@ export class ReportManager extends React.Component<{}> {
                     )}
                 </Dropzone>
                 {this.mediaFiles.length > 0 && <ul className="file-list">{this.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
-                <Button
-                    text="submit"
-                    icon={this.submitting ? <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} /> : <></>}
-                    iconPosition={OrientationType.RIGHT}
-                    onClick={() => {
-                        this.reportIssue();
-                    }}
-                />
+                {this.submitting ? (
+                    <Button
+                        text="Submit"
+                        type={Type.TERT}
+                        icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
+                        iconPlacement="right"
+                        onClick={() => {
+                            this.reportIssue();
+                        }}
+                    />
+                ) : (
+                    <Button
+                        text="Submit"
+                        type={Type.TERT}
+                        onClick={() => {
+                            this.reportIssue();
+                        }}
+                    />
+                )}
+
                 <div style={{ position: 'absolute', top: '4px', right: '4px' }}>
                     <IconButton tooltip="close" icon={<CgClose size={'16px'} />} onClick={this.close} />
                 </div>
@@ -588,7 +606,7 @@ export class ReportManager extends React.Component<{}> {
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
-                dialogueBoxStyle={{ width: 'auto', minWidth: '300px', height: '85vh', maxHeight: '90vh', background: '#ffffff', borderRadius: '8px' }}
+                dialogueBoxStyle={{ width: 'auto', minWidth: '300px', height: '85vh', maxHeight: '90vh', background: StrCast(Doc.UserDoc().userBackgroundColor), borderRadius: '8px' }}
             />
         );
     }
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts
index 51517e80d..66394a0ca 100644
--- a/src/client/util/reportManager/reportManagerUtils.ts
+++ b/src/client/util/reportManager/reportManagerUtils.ts
@@ -50,5 +50,5 @@ export interface FileData {
     file: File;
 }
 
-export const inactiveBorderColor = '#cbd5e1';
-export const inactiveColor = '#64748b';
+export const inactiveBorderColor = '#b8b8b8';
+export const inactiveColor = '#808080';
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 07b2afd91..17a3d0a03 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -253,21 +253,18 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     };
 
     @computed get highlighter() {
-        return <Group>
-            <IconButton 
-                icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
-                tooltip={'Click to Highlight'}
-                onClick={this.highlightClicked}
-                colorPicker={this.highlightColor}
-                color={StrCast(Doc.UserDoc().userColor)}
-            />
-            <ColorPicker
-                colorPickerType={'github'}
-                selectedColor={this.highlightColor}
-                setSelectedColor={color => this.changeHighlightColor(color)}
-                size={Size.XSMALL}
-            />
-        </Group>
+        return (
+            <Group>
+                <IconButton
+                    icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
+                    tooltip={'Click to Highlight'}
+                    onClick={this.highlightClicked}
+                    colorPicker={this.highlightColor}
+                    color={StrCast(Doc.UserDoc().userColor)}
+                />
+                <ColorPicker colorPickerType={'github'} selectedColor={this.highlightColor} setSelectedColor={color => this.changeHighlightColor(color)} size={Size.XSMALL} />
+            </Group>
+        );
     }
 
     @action changeHighlightColor = (color: string) => {
@@ -312,12 +309,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             this.Status === 'marquee' ? (
                 <>
                     {this.highlighter}
-                    <IconButton 
-                        tooltip={'Drag to Place Annotation'} 
-                        onPointerDown={this.pointerDown} 
-                        icon={<FontAwesomeIcon icon="comment-alt"/>}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />
+                    <IconButton tooltip={'Drag to Place Annotation'} onPointerDown={this.pointerDown} icon={<FontAwesomeIcon icon="comment-alt" />} color={StrCast(Doc.UserDoc().userColor)} />
                     {/* GPT Summarize icon only shows up when text is highlighted, not on marquee selection*/}
                     {AnchorMenu.Instance.StartCropDrag === unimplementedFunction && this.canSummarize() && (
                         <Tooltip key="gpt" title={<div className="dash-tooltip">Summarize with AI</div>}>
@@ -338,66 +330,30 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                         mode={this.GPTMode}
                     />
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
-                        <IconButton 
-                            tooltip={'Click to Record Annotation'}
-                            onPointerDown={this.audioDown}
-                            icon={<FontAwesomeIcon icon="microphone" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
-                    )}
-                    {this.canEdit() && (
-                        <IconButton 
-                            tooltip={'AI edit suggestions'}
-                            onPointerDown={this.gptEdit}
-                            icon={<FontAwesomeIcon icon="pencil-alt" />}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                        <IconButton tooltip={'Click to Record Annotation'} onPointerDown={this.audioDown} icon={<FontAwesomeIcon icon="microphone" />} color={StrCast(Doc.UserDoc().userColor)} />
                     )}
-                    <Popup 
-                        tooltip='Find document to link to selected text'
-                        type={Type.PRIM}
-                        icon={<FontAwesomeIcon icon={'search'} />}
-                        popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />
+                    {this.canEdit() && <IconButton tooltip={'AI edit suggestions'} onPointerDown={this.gptEdit} icon={<FontAwesomeIcon icon="pencil-alt" />} color={StrCast(Doc.UserDoc().userColor)} />}
+                    <Popup tooltip="Find document to link to selected text" type={Type.PRIM} icon={<FontAwesomeIcon icon={'search'} />} popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />} color={StrCast(Doc.UserDoc().userColor)} />
                     {AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? null : (
-                        <IconButton 
-                            tooltip={'Click/Drag to create cropped image'}
-                            onPointerDown={this.cropDown}
-                            icon={<FontAwesomeIcon icon="image"/>}
-                            color={StrCast(Doc.UserDoc().userColor)}
-                        />
+                        <IconButton tooltip={'Click/Drag to create cropped image'} onPointerDown={this.cropDown} icon={<FontAwesomeIcon icon="image" />} color={StrCast(Doc.UserDoc().userColor)} />
                     )}
                 </>
             ) : (
                 <>
-                    {this.Delete !== returnFalse && <IconButton 
-                        tooltip={'Remove Link Anchor'}
-                        onPointerDown={this.Delete}
-                        icon={<FontAwesomeIcon icon="trash-alt" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.PinToPres !== returnFalse && <IconButton 
-                        tooltip={'Pin to Presentation'}
-                        onPointerDown={this.PinToPres}
-                        icon={<FontAwesomeIcon icon="map-pin" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.ShowTargetTrail !== returnFalse && <IconButton 
-                        tooltip={'Show Linked Trail'}
-                        onPointerDown={this.ShowTargetTrail}
-                        icon={<FontAwesomeIcon icon="taxi" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
-                    {this.IsTargetToggler !== returnFalse && <Toggle
-                        tooltip={'Make target visibility toggle on click'}
-                        type={Type.PRIM}
-                        toggleType={ToggleType.BUTTON}
-                        toggleStatus={this.IsTargetToggler()}
-                        onClick={this.MakeTargetToggle}
-                        icon={<FontAwesomeIcon icon="thumbtack" />}
-                        color={StrCast(Doc.UserDoc().userColor)}
-                    />}
+                    {this.Delete !== returnFalse && <IconButton tooltip={'Remove Link Anchor'} onPointerDown={this.Delete} icon={<FontAwesomeIcon icon="trash-alt" />} color={StrCast(Doc.UserDoc().userColor)} />}
+                    {this.PinToPres !== returnFalse && <IconButton tooltip={'Pin to Presentation'} onPointerDown={this.PinToPres} icon={<FontAwesomeIcon icon="map-pin" />} color={StrCast(Doc.UserDoc().userColor)} />}
+                    {this.ShowTargetTrail !== returnFalse && <IconButton tooltip={'Show Linked Trail'} onPointerDown={this.ShowTargetTrail} icon={<FontAwesomeIcon icon="taxi" />} color={StrCast(Doc.UserDoc().userColor)} />}
+                    {this.IsTargetToggler !== returnFalse && (
+                        <Toggle
+                            tooltip={'Make target visibility toggle on click'}
+                            type={Type.PRIM}
+                            toggleType={ToggleType.BUTTON}
+                            toggleStatus={this.IsTargetToggler()}
+                            onClick={this.MakeTargetToggle}
+                            icon={<FontAwesomeIcon icon="thumbtack" />}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
+                    )}
                 </>
             );