theming

3 files changed, 79 insertions, 57 deletions

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';