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/util/reportManager/ReportManager.scss | 32 ++++--- src/client/util/reportManager/ReportManager.tsx | 100 ++++++++++++--------- .../util/reportManager/reportManagerUtils.ts | 4 +- 3 files changed, 79 insertions(+), 57 deletions(-) (limited to 'src/client/util') 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