Skip to content

Commit 64d982a

Browse files
leebologyleebology
committed
Light mode theme. Collected almost all colors into _variablesLM.scss
1 parent 5dd9e20 commit 64d982a

26 files changed

+610
-214
lines changed

‎src/app/FrontendTypes.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,7 @@ export interface HandleProps {
247247
}
248248

249249
export interface MainSliderProps {
250+
className: string;
250251
snapshotsLength: number;
251252
}
252253

@@ -309,13 +310,12 @@ export interface LinkControlProps {
309310
}
310311

311312
export interface ControlStyles {
312-
fontSize: string;
313+
//fontSize: string;
313314
padding: string;
314315
}
315316

316317
export interface DropDownStyle {
317318
margin: string;
318-
fontSize: string;
319319
fontFamily: string;
320320
borderRadius: string;
321321
borderStyle: string;

‎src/app/components/Action.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,9 @@ const Action = (props: ActionProps): JSX.Element => {
117117
>
118118
<div className='action-component-text'>
119119
<input
120+
className='actionname'
120121
key={`ActionInput${displayName}`}
121122
type='text'
122-
className='actionname'
123123
placeholder={`Snapshot: ${displayName}`}
124124
/>
125125
</div>

‎src/app/components/MainSlider.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const handle = (props: HandleProps): JSX.Element => {
1212

1313
return (
1414
<Tooltip // Tooltip that pop's up when clicking/dragging the slider thumb/handle that displays the current snapshot index
15+
className='travel-tooltip'
1516
prefixCls='rc-slider-tooltip'
1617
overlay={value} // the currentIndex
1718
visible={dragging} // tooltip only visible when slider thumb is click and/or dragged
@@ -45,6 +46,8 @@ function MainSlider(props: MainSliderProps): JSX.Element {
4546

4647
return (
4748
<Slider
49+
className='travel-slider'
50+
color= '#0af548'
4851
min={0} // index of our first snapshot
4952
max={snapshotsLength - 1} // index of our last snapshot
5053
value={sliderIndex} // currently slider thumb position

‎src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
2222
import { useDispatch } from 'react-redux';
2323
import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../FrontendTypes';
2424

25+
const linkStroke = '#F00008'; //#F00008 original
26+
const rootStroke = '#F00008'; //#F00008 original
27+
const nodeParentFill = '#161521'; //#161521 original
28+
const nodeChildFill = '#62d6fb'; //#62d6fb original
29+
const nodeParentStroke = '#F00008'; //#F00008 original
30+
const nodeChildStroke = '#4D4D4D'; //#4D4D4D original
31+
2532
const defaultMargin: DefaultMargin = {
2633
top: 30,
2734
left: 30,
@@ -190,15 +197,17 @@ export default function ComponentMap({
190197
/>
191198

192199
<svg ref={containerRef} width={totalWidth} height={totalHeight}>
193-
<LinearGradient id='links-gradient' from='#e75e62' to='#f00008' />
200+
{/* <LinearGradient id='root-gradient' from='#e75e62' to='#f00008' /> */}
201+
<LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
202+
<LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
194203
<rect
204+
className='componentMapContainer'
195205
onClick={() => {
196206
hideTooltip();
197207
}}
198208
width={totalWidth}
199209
height={totalHeight}
200210
rx={14}
201-
fill='#242529'
202211
/>
203212
<Group top={margin.top} left={margin.left}>
204213
<Tree
@@ -210,10 +219,11 @@ export default function ComponentMap({
210219
<Group top={origin.y} left={origin.x}>
211220
{tree.links().map((link, i) => (
212221
<LinkComponent
222+
className='compMapLink'
213223
key={i}
214224
data={link}
215225
percent={stepPercent}
216-
stroke='#F00008'
226+
//stroke={linkStroke}
217227
strokeWidth='1'
218228
fill='none'
219229
/>
@@ -263,9 +273,10 @@ export default function ComponentMap({
263273
<Group top={top} left={left} key={key} className='rect'>
264274
{node.depth === 0 && (
265275
<circle
276+
className='compMapRoot'
266277
r={25} // increase from 12 to 25 to improve visibility
267-
fill="url('#links-gradient')"
268-
stroke='#F00008' // changing to red #F00008 to increase readability with sharper contrast
278+
fill="url('#root-gradient')"
279+
//stroke={rootStroke}
269280
onClick={() => {
270281
dispatch(toggleExpanded(node.data));
271282
hideTooltip();
@@ -277,16 +288,19 @@ export default function ComponentMap({
277288
and sets it relative position to other parent nodes of the same level. */}
278289
{node.depth !== 0 && (
279290
<rect
291+
className={node.children ? 'compMapParent' : 'compMapChild'}
280292
height={height}
281293
width={width}
282294
y={-height / 2}
283295
x={-width / 2}
284-
fill={node.children ? '#161521' : '#62d6fb'}
285-
stroke={
286-
node.data.isExpanded && node.data.children.length > 0
287-
? '#F00008'
288-
: '#4D4D4D'
289-
}
296+
fill="url('#parent-gradient')"
297+
//color={'#ff0000'}
298+
//fill={node.children ? nodeParentFill : nodeChildFill}
299+
//stroke={
300+
// node.data.isExpanded && node.data.children.length > 0
301+
// ? nodeParentStroke
302+
// : nodeChildStroke
303+
// }
290304
strokeWidth={1.5}
291305
strokeOpacity='1'
292306
rx={node.children ? 4 : 10}
@@ -332,12 +346,19 @@ export default function ComponentMap({
332346

333347
{/* Display text inside of each component node */}
334348
<text
349+
className={
350+
node.depth === 0
351+
? 'compMapRootText'
352+
: node.children
353+
? 'compMapParentText'
354+
: 'compMapChildText'
355+
}
335356
dy='.33em'
336-
fontSize={10}
357+
fontSize='20px'
337358
fontFamily='Roboto'
338359
textAnchor='middle'
339360
style={{ pointerEvents: 'none' }}
340-
fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
361+
//fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
341362
>
342363
{node.data.name}
343364
</text>

‎src/app/components/StateRoute/ComponentMap/LinkControls.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import React from 'react';
33
import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../FrontendTypes';
44
// Font size of the Controls label and Dropdowns
55
const controlStyles: ControlStyles = {
6-
fontSize: '16px',
6+
//fontSize: '16px',
77
padding: '10px',
88
};
99

1010
const dropDownStyle: DropDownStyle = {
1111
margin: '0.5em',
12-
fontSize: '16px',
12+
//fontSize: '16px',
1313
fontFamily: 'Roboto, sans-serif',
1414
borderRadius: '4px',
1515
borderStyle: 'solid',

‎src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
155155
<form className='routesForm' id='routes-formcontrol'>
156156
<label id='routes-dropdown'>Select Route: </label>
157157
<select
158+
className='performance-dropdown'
158159
labelId='demo-simple-select-label'
159160
id='routes-select'
160161
onChange={(e) => {

‎src/app/components/Tutorial.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
365365
type='button'
366366
onClick={() => startIntro()}
367367
>
368-
<HelpOutlineIcon sx={{ pr: 1 }} /> Tutorial
368+
<HelpOutlineIcon className="button-icon" sx={{ pr: 1 }} /> Tutorial
369369
</Button>
370370
</>
371371
);

‎src/app/components/theme.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { createTheme } from '@mui/material/styles';
22
const theme = createTheme({
3+
// typography: {
4+
// fontSize: 2,
5+
// },
36
palette: {
47
primary: {
5-
main: '#8Fb5f9',
8+
main: '#3c6e71',
69
},
710
secondary: {
8-
main: '#BF6DD2',
11+
main: '#3c6e71',
912
},
1013
},
1114
components: {
@@ -16,7 +19,7 @@ const theme = createTheme({
1619
// Name of the slot
1720
root: {
1821
// Some CSS
19-
fontSize: '0.8rem',
22+
fontSize: '0.8rem',
2023
letterSpacing: '0.1rem',
2124
lineHeight: '0.8rem',
2225
},

‎src/app/containers/ActionContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
198198
<Button
199199
variant='contained'
200200
className='empty-button'
201-
style={{ backgroundColor: '#ff6569' }}
201+
//style={{ backgroundColor: '#ff6569' }}
202202
onClick={() => {
203203
dispatch(emptySnapshots()); // set slider back to zero, visually
204204
resetSlider();

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,26 +92,26 @@ function ButtonsContainer(): JSX.Element {
9292
return (
9393
<div className='buttons-container'>
9494
<Button
95-
variant='outlined'
9695
className='pause-button'
96+
variant='outlined'
9797
type='button'
9898
onClick={() => dispatch(toggleMode('paused'))}
9999
>
100-
{paused ? <LockIcon sx={{ pr: 1 }} /> : <LockOpenIcon sx={{ pr: 1 }} />}
100+
{paused ? <LockIcon className="button-icon" sx={{ pr: 1 }} /> : <LockOpenIcon className="button-icon" sx={{ pr: 1 }} />}
101101
{paused ? 'Locked' : 'Unlocked'}
102102
</Button>
103103
<Button
104-
variant='outlined'
105104
className='export-button'
105+
variant='outlined'
106106
type='button'
107107
//@ts-ignore
108108
onClick={() => exportHandler(tabs[currentTab])}
109109
>
110-
<FileDownloadIcon sx={{ pr: 1 }} />
110+
<FileDownloadIcon className="button-icon" sx={{ pr: 1 }} />
111111
Download
112112
</Button>
113113
<Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
114-
<FileUploadIcon sx={{ pr: 1 }} />
114+
<FileUploadIcon className="button-icon" sx={{ pr: 1 }} />
115115
Upload
116116
</Button>
117117
{/* The component below renders a button for the tutorial walkthrough of Reactime */}
@@ -129,7 +129,7 @@ function ButtonsContainer(): JSX.Element {
129129
</span>
130130
}
131131
>
132-
<LoopIcon sx={{ pr: 1 }} />
132+
<LoopIcon className="button-icon" sx={{ pr: 1 }} />
133133
Reconnect
134134
</Button>
135135
<Dialog className='dialog-pop-up' open={reconnectDialogOpen} onClose={handleReconnectCancel}>

0 commit comments

Comments
 (0)