From e0c100ecb1fe2b16209e955911f7e8267a2535ef Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Wed, 19 Jul 2023 14:16:35 -0400 Subject: ui changes --- src/client/util/reportManager/ReportManager.scss | 131 +-------------------- src/client/util/reportManager/ReportManager.tsx | 49 +++++--- .../util/reportManager/ReportManagerComponents.tsx | 29 ++++- .../util/reportManager/reportManagerUtils.ts | 44 +++++-- 4 files changed, 99 insertions(+), 154 deletions(-) (limited to 'src') diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss index f1ae6c387..4e80cbeeb 100644 --- a/src/client/util/reportManager/ReportManager.scss +++ b/src/client/util/reportManager/ReportManager.scss @@ -2,9 +2,6 @@ // header -$text-gray: #555555; -$outline-gray: #9c9c9c; - .report-header { display: flex; justify-content: space-between; @@ -48,7 +45,6 @@ $outline-gray: #9c9c9c; .report-label { font-size: 14px; font-weight: 400; - // color: $text-gray; } .report-section { @@ -74,7 +70,6 @@ $outline-gray: #9c9c9c; .report-select { padding: 8px; - border-color: $outline-gray; background-color: transparent; .report-opt { @@ -87,17 +82,17 @@ $outline-gray: #9c9c9c; .report-input { border: none; outline: none; - border-bottom: 1px solid $outline-gray; + border-bottom: 1px solid; padding: 8px; padding-left: 0; transition: all 0.2s ease; background: transparent; &:hover { - border-bottom-color: $text-gray; + // border-bottom-color: $text-gray; } &:focus { - border-bottom-color: #4476f7; + // border-bottom-color: #4476f7; } } @@ -122,7 +117,6 @@ $outline-gray: #9c9c9c; display: flex; flex-direction: column; gap: 16px; - // background-color: #ffffff; text-align: left; position: relative; @@ -157,8 +151,7 @@ $outline-gray: #9c9c9c; .issue-card { cursor: pointer; padding: 16px; - // background-color: #ffffff; - border: 1px solid $outline-gray; + border: 1px solid; transition: all 0.1s ease; display: flex; flex-direction: column; @@ -177,7 +170,6 @@ $outline-gray: #9c9c9c; cursor: pointer; font-size: 14px; font-weight: 400; - // color: $text-gray; padding: 0; margin: 0; } @@ -187,21 +179,6 @@ $outline-gray: #9c9c9c; font-weight: 500; padding: 0; margin: 0; - color: #4476f7; - } - - &:hover { - background-color: #4476f7; - border-color: #4476f7; - color: #ffffff; - - .issue-label { - color: #ffffff; - } - - .issue-title { - color: #ffffff; - } } } @@ -210,14 +187,13 @@ $outline-gray: #9c9c9c; .dropzone { padding: 2rem; border-radius: 0.5rem; - border: 2px dashed $outline-gray; + border: 2px dashed; .dropzone-instructions { display: flex; flex-direction: column; align-items: center; gap: 16px; - // color: $text-gray; p { text-align: center; @@ -230,7 +206,6 @@ $outline-gray: #9c9c9c; margin: 0; padding: 0; font-size: 14px; - // color: $text-gray; width: 100%; overflow-x: auto; list-style-type: none; @@ -255,14 +230,11 @@ $outline-gray: #9c9c9c; display: flex; flex-direction: column; gap: 16px; - // background-color: #ffffff; text-align: left; position: relative; overflow: auto; .issue-label { - // color: $text-gray; - .issue-link { cursor: pointer; color: #4476f7; @@ -277,12 +249,10 @@ $outline-gray: #9c9c9c; .issue-date { font-size: 14px; - // color: $text-gray; } .issue-content { font-size: 14px; - // color: $text-gray; } } @@ -384,94 +354,3 @@ $outline-gray: #9c9c9c; border-radius: 32px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } - -// Old code - -// <----------------------------------------------------------------------------> - -// .issue-list-wrapper { -// position: relative; -// min-width: 250px; -// background-color: $light-blue; -// overflow-y: scroll; -// } - -// .issue-list { -// display: flex; -// align-items: center; -// justify-content: space-between; -// padding: 5px; -// margin: 5px; -// border-radius: 5px; -// border: 1px solid grey; -// background-color: lightgoldenrodyellow; -// } - -// // issue should pop up when the user hover over the issue -// .issue-list:hover { -// box-shadow: 2px; -// cursor: pointer; -// border: 3px solid #252b33; -// } - -// .issue-content { -// background-color: white; -// padding: 10px; -// flex: 1 1 auto; -// overflow-y: scroll; -// } - -// .issue-title { -// font-size: 20px; -// font-weight: 600; -// color: black; -// } - -// .issue-body { -// padding: 0 10px; -// width: 100%; -// text-align: left; -// } - -// .issue-body > * { -// margin-top: 5px; -// } - -// .issue-body img, -// .issue-body video { -// display: block; -// max-width: 100%; -// } - -// .report-issue-fab { -// position: fixed; -// bottom: 20px; -// right: 20px; -// display: flex; -// align-items: center; -// justify-content: center; -// cursor: pointer; -// } - -// .loading-center { -// margin: auto 0; -// } - -// .settings-content label { -// margin-top: 10px; -// } - -// .report-disclaimer { -// font-size: 8px; -// color: grey; -// padding-right: 50px; -// font-style: italic; -// text-align: left; -// } - -// .flex-select { -// display: flex; -// align-items: center; -// justify-content: center; -// gap: 10px; -// } diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index e15d3fdae..be46ba0a8 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; +import v4 = require('uuid/v4'); import '.././SettingsManager.scss'; import './ReportManager.scss'; +import Dropzone from 'react-dropzone'; +import ReactLoading from 'react-loading'; import { action, observable } from 'mobx'; import { BsX, BsArrowsAngleExpand, BsArrowsAngleContract } from 'react-icons/bs'; import { CgClose } from 'react-icons/cg'; @@ -13,10 +16,7 @@ import { Networking } from '../../Network'; import { MainViewModal } from '../../views/MainViewModal'; import { Octokit } from '@octokit/core'; import { Button, IconButton, OrientationType, Type } from 'browndash-components'; -import Dropzone from 'react-dropzone'; -import ReactLoading from 'react-loading'; -import v4 = require('uuid/v4'); -import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils'; +import { BugType, FileData, Priority, ViewState, darkColors, isLightText, lightColors } from './reportManagerUtils'; import { IssueCard, IssueView, Tag } from './ReportManagerComponents'; import { StrCast } from '../../../fields/Types'; const higflyout = require('@hig/flyout'); @@ -352,14 +352,19 @@ export class ReportManager extends React.Component<{}> { * @returns the component that dispays all issues */ private viewIssuesComponent = () => { + const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor)); + const colors = darkMode ? darkColors : lightColors; + const isTagDarkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor)); + const activeTagTextColor = isTagDarkMode ? darkColors.text : lightColors.text; + return ( -
+
-

Open Issues

+

Open Issues

); @@ -476,11 +482,15 @@ export class ReportManager extends React.Component<{}> { * @returns the form component for submitting issues */ private reportIssueComponent = () => { + const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor)); + const colors = darkMode ? darkColors : lightColors; + return ( -
+
); diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx index 576c3c3a1..651442030 100644 --- a/src/client/util/reportManager/ReportManagerComponents.tsx +++ b/src/client/util/reportManager/ReportManagerComponents.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import { Issue } from './reportManagerSchema'; -import { getLabelColors } from './reportManagerUtils'; +import { darkColors, getLabelColors, isLightText, lightColors } from './reportManagerUtils'; import ReactMarkdown from 'react-markdown'; import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; +import { StrCast } from '../../../fields/Types'; +import { Doc } from '../../../fields/Doc'; /** * Mini components to render issues. @@ -16,8 +18,31 @@ interface IssueCardProps { // Component for the issue cards list on the left export const IssueCard = ({ issue, onSelect }: IssueCardProps) => { + const [textColor, setTextColor] = React.useState(''); + const [bgColor, setBgColor] = React.useState(''); + const [borderColor, setBorderColor] = React.useState(''); + + const resetColors = () => { + const darkMode = isLightText(StrCast(Doc.UserDoc().userBackgroundColor)); + const colors = darkMode ? darkColors : lightColors; + setTextColor(colors.text); + setBorderColor(colors.border); + setBgColor('transparent'); + }; + + const handlePointerOver = () => { + const darkMode = isLightText(StrCast(Doc.UserDoc().userVariantColor)); + setTextColor(darkMode ? darkColors.text : lightColors.text); + setBorderColor(StrCast(Doc.UserDoc().userVariantColor)); + setBgColor(StrCast(Doc.UserDoc().userVariantColor)); + }; + + React.useEffect(() => { + resetColors(); + }, []); + return ( -
+
diff --git a/src/client/util/reportManager/reportManagerUtils.ts b/src/client/util/reportManager/reportManagerUtils.ts index 66394a0ca..682113a89 100644 --- a/src/client/util/reportManager/reportManagerUtils.ts +++ b/src/client/util/reportManager/reportManagerUtils.ts @@ -18,11 +18,16 @@ export enum BugType { ENHANCEMENT = 'enhancement', } +export interface FileData { + _id: string; + file: File; +} + // [bgColor, color] export const priorityColors: { [key: string]: string[] } = { 'priority-low': ['#d4e0ff', '#000000'], 'priority-medium': ['#6a91f6', '#ffffff'], - 'priority-high': ['#0f4ce7', '#ffffff'], + 'priority-high': ['#003cd5', '#ffffff'], }; // [bgColor, color] @@ -45,10 +50,35 @@ export const getLabelColors = (label: string): string[] => { return ['#0f73f6', '#ffffff']; }; -export interface FileData { - _id: string; - file: File; -} +const hexToRgb = (hex: string) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } + : { + r: 0, + g: 0, + b: 0, + }; +}; + +// function that returns whether text should be light on the given bg color +export const isLightText = (bgHex: string): boolean => { + const { r, g, b } = hexToRgb(bgHex); + return r * 0.299 + g * 0.587 + b * 0.114 <= 186; +}; -export const inactiveBorderColor = '#b8b8b8'; -export const inactiveColor = '#808080'; +export const lightColors = { + text: '#000000', + textGrey: '#5c5c5c', + border: '#b8b8b8', +}; + +export const darkColors = { + text: '#ffffff', + textGrey: '#d6d6d6', + border: '#717171', +}; -- cgit v1.2.3-70-g09d2