Skip to content

Commit 1b98602

Browse files
brok3turtl3brok3turtl3
authored
Merge pull request #10 from oslabs-beta/morahBranch
Morah branch
2 parents 9a90d11 + f506b6e commit 1b98602

File tree

14 files changed

+140
-139
lines changed

14 files changed

+140
-139
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,7 @@
212212
"react-select": "^3.2.0",
213213
"react-spinners": "^0.11.0",
214214
"recoil": "0.0.10",
215+
"styled-components": "^6.0.4",
215216
"util": "^0.12.4",
216217
"web-vitals": "^1.1.0",
217218
"yarn": "^1.22.19"

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,10 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
5252
const { width, height, data, comparison, setSeries, series, setAction } = props;
5353
const [snapshots] = useState(0);
5454
const [open, setOpen] = useState(false);
55-
const [picOpen, setPicOpen] = useState(false);
56-
//tracking whether or not the clear series button is clicked
57-
const [buttonLoad, setButtonLoad] = useState(false);
58-
55+
const [picOpen, setPicOpen] = useState(false);
56+
const [buttonLoad, setButtonLoad] = useState(false); //tracking whether or not the clear series button is clicked
5957
const theme = useTheme();
58+
6059
useEffect(() => {
6160
dispatch(setCurrentTabInApp('performance-comparison'));
6261
}, [dispatch]);
@@ -198,6 +197,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
198197
<div>
199198
<div className='series-options-container'>
200199
<div className='dropdown-and-delete-series-container'>
200+
201201
<Button
202202
variant='contained'
203203
sx={{ p: 2, color: 'white' }}
@@ -211,15 +211,12 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
211211
setButtonLoad(false);
212212
}, 1000);
213213
}}
214-
style={
215-
buttonLoad
216-
? { backgroundColor: theme.palette.secondary.main }
217-
: //KYLE YOU LEFT OFF HERE
218-
{ backgroundColor: theme.palette.primary.main }
219-
}
220-
>
214+
style={ buttonLoad ? { backgroundColor: theme.palette.primary.main }
215+
: { backgroundColor: theme.palette.secondary.main }
216+
}>
221217
{buttonLoad ? 'Deleted' : 'Clear Series'}
222218
</Button>
219+
223220
<h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
224221
Compare Series:{' '}
225222
</h4>

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,14 +110,13 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
110110
minWidth: 80,
111111
height: 30,
112112
}));
113-
113+
114114
const StyledSelect = styled(Select)({
115115
minWidth: 80,
116116
fontSize: '.75rem',
117117
fontWeight: 200,
118118
height: 30,
119119
});
120-
121120

122121
const handleSeriesChange = (event) => {
123122
if (!event) return;
@@ -174,7 +173,6 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
174173
style={{ color: 'white' }}
175174
labelId='simple-select-outlined-label'
176175
id='simple-select-outlined'
177-
178176
value={series}
179177
onChange={handleSeriesChange}
180178
>
@@ -195,7 +193,6 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
195193
style={{ color: 'white' }}
196194
labelId='snapshot-select'
197195
id='snapshot-select'
198-
199196
value={action} // snapshots
200197
onChange={handleActionChange}
201198
>

‎src/app/components/Tutorial.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55
import * as React from 'react';
66
import { Component } from 'react';
77
import 'intro.js/introjs.css';
8-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
9-
import { faQuestion } from '@fortawesome/free-solid-svg-icons';
108
import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
119
import { TutorialProps, TutorialState, StepsObj } from '../FrontendTypes';
12-
1310
//Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly.
11+
import { Button } from '@mui/material';
12+
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
1413
const { Steps } = require('intro.js-react');
1514

1615
// This is the tutorial displayed when the "How to use" button is clicked
@@ -74,7 +73,6 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
7473
this.setState({ stepsEnabled: true });
7574
};
7675

77-
7876
let steps: StepsObj[] = [];
7977

8078
switch (currentTabInApp) {
@@ -350,9 +348,14 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
350348
onBeforeChange={(currentStepIndex) => onChangeHandler(currentStepIndex)}
351349
ref={(steps) => (this.steps = steps)}
352350
/>
353-
<button className='howToUse-button' type='button' onClick={() => startIntro()}>
354-
<FontAwesomeIcon icon={faQuestion} /> Tutorial
355-
</button>
351+
<Button
352+
variant='outlined'
353+
className='howToUse-button'
354+
type='button'
355+
onClick={() => startIntro()}
356+
>
357+
<HelpOutlineIcon sx={{pr: 1}}/> Tutorial
358+
</Button>
356359
</>
357360
);
358361
}

‎src/app/components/theme.ts

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
import { createTheme } from '@mui/material/styles';
22
const theme = createTheme({
3-
palette: {
4-
primary: {
5-
main: '#8Fb5f9',
6-
},
7-
secondary: {
8-
main: '#BF6DD2',
9-
},
3+
palette: {
4+
primary: {
5+
main: '#8Fb5f9',
6+
},
7+
secondary: {
8+
main: '#BF6DD2',
109
},
11-
components: {
12-
// Name of the component
10+
},
11+
components: {
12+
// Name of the component
1313

14-
MuiButton: {
15-
styleOverrides: {
16-
// Name of the slot
17-
root: {
18-
// Some CSS
19-
fontSize: '0.8rem',
20-
letterSpacing: '0.1rem',
21-
lineHeight: '0.8rem',
22-
},
23-
},
14+
MuiButton: {
15+
styleOverrides: {
16+
// Name of the slot
17+
root: {
18+
// Some CSS
19+
fontSize: '0.8rem',
20+
letterSpacing: '0.1rem',
21+
lineHeight: '0.8rem',
2422
},
25-
// MuiSelect: {
26-
// styleOverrides: {
27-
// root: {
28-
// main: '#556cd4',
29-
// },
30-
// },
31-
// },
23+
},
3224
},
25+
// MuiSelect: {
26+
// styleOverrides: {
27+
// root: {
28+
// main: '#556cd4',
29+
// },
30+
// },
31+
// },
32+
},
3333
});
3434

35-
export default theme;
35+
export default theme;

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import * as React from 'react';
2-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3-
import {
4-
faUpload,
5-
faDownload,
6-
faSquare,
7-
faColumns,
8-
faUnlock,
9-
faLock,
10-
} from '@fortawesome/free-solid-svg-icons';
112
import { importSnapshots, toggleMode } from '../actions/actions';
123
import { useStoreContext } from '../store';
4+
import { Button } from '@mui/material';
135

146
import Tutorial from '../components/Tutorial';
7+
import LockIcon from '@mui/icons-material/Lock';
8+
import LockOpenIcon from '@mui/icons-material/LockOpen';
9+
import FileDownloadIcon from '@mui/icons-material/FileDownload';
10+
import FileUploadIcon from '@mui/icons-material/FileUpload';
11+
1512

1613
// function exportHandler takes in a parameter snapshots which is typed as an array
1714
// the function does not return anything so the type is void
@@ -103,18 +100,28 @@ function ButtonsContainer(): JSX.Element {
103100

104101
return (
105102
<div className='buttons-container'>
106-
<button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
107-
{paused ? <FontAwesomeIcon icon={faLock} /> : <FontAwesomeIcon icon={faUnlock} />}
103+
<Button
104+
variant='outlined'
105+
className='pause-button'
106+
type='button'
107+
onClick={() => dispatch(toggleMode('paused'))}
108+
>
109+
{paused ? <LockIcon sx={{pr: 1}}/> : <LockOpenIcon sx={{pr: 1}}/>}
108110
{paused ? 'Locked' : 'Unlocked'}
109-
</button>
110-
<button className='export-button' type='button' onClick={() => exportHandler(tabs[currentTab])}>
111-
<FontAwesomeIcon icon={faDownload} />
111+
</Button>
112+
<Button
113+
variant='outlined'
114+
className='export-button'
115+
type='button'
116+
onClick={() => exportHandler(snapshots)}
117+
>
118+
<FileDownloadIcon sx={{pr: 1}}/>
112119
Download
113-
</button>
114-
<button className='import-button' type='button' onClick={() => importHandler(dispatch)}>
115-
<FontAwesomeIcon icon={faUpload} />
120+
</Button>
121+
<Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
122+
<FileUploadIcon sx={{pr: 1}}/>
116123
Upload
117-
</button>
124+
</Button>
118125
{/* The component below renders a button for the tutorial walkthrough of Reactime */}
119126
<Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
120127
</div>

‎src/app/containers/TravelContainer.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
} from '../actions/actions';
1313
import { useStoreContext } from '../store';
1414
import { TravelContainerProps } from '../FrontendTypes';
15+
import FastRewindIcon from '@mui/icons-material/FastRewind';
16+
import FastForwardIcon from '@mui/icons-material/FastForward';
1517

1618
/*
1719
This container renders the time-travel play button, seek bar, playback controls, and the playback speed dropdown, located towards the bottom of the application, above the locked, download, upload, and tutorial buttons
@@ -73,10 +75,10 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
7375
</button>
7476
<MainSlider snapshotsLength={snapshotsLength} />
7577
<button className='backward-button' onClick={() => dispatch(moveBackward())} type='button'>
76-
{'<'}
78+
<FastRewindIcon sx={{mr: 1, color: '#000'}}/>
7779
</button>
7880
<button className='forward-button' onClick={() => dispatch(moveForward())} type='button'>
79-
{'>'}
81+
<FastForwardIcon />
8082
</button>
8183
<Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
8284
</div>

‎src/app/styles/abstracts/_variables.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/// fontFamily: 'monaco, Consolas, Lucida Console, monospace'
2-
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
33
/// @type List
4-
$text-font-stack: 'Roboto', sans-serif !default;
4+
$text-font-stack: 'Outfit', sans-serif !default;
55

66
/// @type Color
77
/// fiery-rose changed from ff6569 to F00008 globally to improve contrast

‎src/app/styles/components/_buttons.scss

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
22

33
.save-series-button {
44
padding: 3px;
@@ -13,7 +13,7 @@
1313
border-radius: 5px;
1414
cursor: pointer;
1515
line-height: 1.5em;
16-
font: 400 16px 'Roboto', sans-serif;
16+
font: 400 16px 'Outfit', sans-serif;
1717
// font-size: $button-text-size;
1818
width: 120px;
1919
background: $red-color-gradient;
@@ -38,14 +38,14 @@
3838
border-radius: 3px;
3939
cursor: pointer;
4040
line-height: 1.5em;
41-
font: 300 16px 'Roboto', sans-serif;
41+
font: 300 16px 'Outfit', sans-serif;
4242
font-size: $button-text-size;
4343
width: 120px;
44-
background: $red-color-gradient;
44+
// background: $red-color-gradient;
4545
height: 30px;
4646

4747
&.animate {
48-
background: rgb(41, 164, 41);
48+
background-color: rgb(41, 164, 41);
4949
}
5050
}
5151

@@ -61,7 +61,7 @@
6161
border-radius: 3px;
6262
cursor: pointer;
6363
line-height: 1.5em;
64-
font: 500 16px 'Roboto', sans-serif;
64+
font: 500 16px 'Outfit', sans-serif;
6565
// font-size: $button-text-size; increase the font size and contrast for readability
6666
width: 120px;
6767
background: #62d6fb;
@@ -95,8 +95,8 @@
9595
border: none;
9696
/* border-radius: 3px; */
9797
background: linear-gradient(145deg, #5c6068, #4d5157);
98-
font: normal 16px "Roboto", sans-serif;
99-
color: #FFFFFF;
98+
font: normal 16px 'Outfit', sans-serif;
99+
color: #ffffff;
100100
display: flex;
101101
justify-content: center;
102102
align-items: center;
@@ -111,8 +111,8 @@
111111
border: transparent;
112112
border-radius: 3px;
113113
background-color: #232529;
114-
font: normal 16px "Roboto", sans-serif;
115-
color: #FFFFFF;
114+
font: normal 16px 'Outfit', sans-serif;
115+
color: #ffffff;
116116
transform: rotateX(90deg);
117117
transition: opacity 300ms, transform 0.15s linear;
118118
opacity: 0;
@@ -137,7 +137,7 @@
137137
width: 100px;
138138
border: transparent;
139139
border-radius: 3px;
140-
font: normal 16px 'Roboto', sans-serif;
140+
font: normal 16px 'Outfit', sans-serif;
141141
}
142142

143143
.empty-button:hover {
@@ -236,7 +236,7 @@
236236
align-items: center;
237237
cursor: pointer;
238238
line-height: 1.5em;
239-
font: 300 16px 'Roboto', sans-serif;
239+
font: 300 16px 'Outfit', sans-serif;
240240
font-size: $button-text-size;
241241

242242
background: $brand-color;
@@ -251,16 +251,11 @@
251251
.dropdown-dark {
252252
background: #444;
253253
border-color: #111111 #0a0a0a black;
254-
background-image: -webkit-linear-gradient(
255-
top,
256-
transparent,
257-
rgba(0, 0, 0, 0.4)
258-
);
254+
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
259255
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
260256
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
261257
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
262-
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
263-
0 1px 1px rgba(0, 0, 0, 0.2);
258+
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
264259
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
265260
}
266261

0 commit comments

Comments
 (0)