From e332c268c013efbc7409bf0072b66e8bf646dfef Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Tue, 18 Jul 2023 13:32:49 -0400 Subject: theming --- src/client/theme.ts | 31 ------ src/client/util/reportManager/ReportManager.scss | 32 ++++--- src/client/util/reportManager/ReportManager.tsx | 100 +++++++++++-------- .../util/reportManager/reportManagerUtils.ts | 4 +- src/client/views/pdf/AnchorMenu.tsx | 106 ++++++--------------- 5 files changed, 110 insertions(+), 163 deletions(-) (limited to 'src') 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 ( -
+
-

Open Issues

+

Open Issues

}> @@ -338,66 +330,30 @@ export class AnchorMenu extends AntimodeMenu { mode={this.GPTMode} /> {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : ( - } - color={StrCast(Doc.UserDoc().userColor)} - /> - )} - {this.canEdit() && ( - } - color={StrCast(Doc.UserDoc().userColor)} - /> + } color={StrCast(Doc.UserDoc().userColor)} /> )} - } - popup={} - color={StrCast(Doc.UserDoc().userColor)} - /> + {this.canEdit() && } color={StrCast(Doc.UserDoc().userColor)} />} + } popup={} color={StrCast(Doc.UserDoc().userColor)} /> {AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? null : ( - } - color={StrCast(Doc.UserDoc().userColor)} - /> + } color={StrCast(Doc.UserDoc().userColor)} /> )} ) : ( <> - {this.Delete !== returnFalse && } - color={StrCast(Doc.UserDoc().userColor)} - />} - {this.PinToPres !== returnFalse && } - color={StrCast(Doc.UserDoc().userColor)} - />} - {this.ShowTargetTrail !== returnFalse && } - color={StrCast(Doc.UserDoc().userColor)} - />} - {this.IsTargetToggler !== returnFalse && } - color={StrCast(Doc.UserDoc().userColor)} - />} + {this.Delete !== returnFalse && } color={StrCast(Doc.UserDoc().userColor)} />} + {this.PinToPres !== returnFalse && } color={StrCast(Doc.UserDoc().userColor)} />} + {this.ShowTargetTrail !== returnFalse && } color={StrCast(Doc.UserDoc().userColor)} />} + {this.IsTargetToggler !== returnFalse && ( + } + color={StrCast(Doc.UserDoc().userColor)} + /> + )} ); -- cgit v1.2.3-70-g09d2