Skip to content

Commit 49b69e8

Browse files
garrettlchowgarrettlchow
committed
began styling play button
1 parent 7bde26b commit 49b69e8

File tree

10 files changed

+92
-287
lines changed

10 files changed

+92
-287
lines changed

‎src/app/containers/ErrorContainer.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
3131
</div>
3232

3333
<p className='error-description'>
34-
To ensure Reactime works correctly with your React application, please refresh your
35-
development page. This allows Reactime to properly connect with your app and start
36-
monitoring state changes.
34+
To ensure Reactime works correctly with your React application, please either refresh
35+
your development page or click the launch button below. This allows Reactime to properly
36+
connect with your app and start monitoring state changes.
3737
</p>
3838
<p className='error-description'>
3939
Important: Reactime requires React Developer Tools to be installed. If you haven't
@@ -51,11 +51,12 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
5151
</div>
5252

5353
<p className='error-note'>
54-
Note: By default, Reactime only launches on URLs starting with localhost.
54+
Note: Reactime only works with React applications and by default only launches on URLs
55+
starting with localhost.
5556
</p>
5657

5758
<button type='button' className='launch-button' onClick={launch}>
58-
<PlayCircle size={18} />
59+
<PlayCircle size={20} />
5960
Launch Reactime
6061
</button>
6162

‎src/app/containers/TravelContainer.tsx

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
/* eslint-disable max-len */
22
import React, { useState } from 'react';
33
import Dropdown from '../components/TimeTravel/Dropdown';
4-
import {
5-
playForward,
6-
pause,
7-
startPlaying,
8-
moveForward,
9-
moveBackward,
10-
resetSlider,
11-
changeSlider,
12-
} from '../slices/mainSlice';
4+
import { playForward, pause, startPlaying, resetSlider, changeSlider } from '../slices/mainSlice';
135
import { useDispatch, useSelector } from 'react-redux';
146
import { MainState, RootState, TravelContainerProps } from '../FrontendTypes';
15-
import { Button } from '@mui/material';
7+
import { Play, Pause } from 'lucide-react';
168

179
/*
1810
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
@@ -39,7 +31,6 @@ function play( // function that will start/pause slider movement
3931
if (playing) {
4032
// if already playing, clicking the button will pause the slider
4133
dispatch(pause());
42-
4334
} else {
4435
let currentIndex = sliderIndex; // the 'currentIndex' will be wherever the 'sliderIndex' is
4536
if (currentIndex === snapshotsLength - 1) {
@@ -72,21 +63,17 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
7263

7364
return (
7465
<div className='travel-container'>
75-
<Button
66+
<button
7667
className='play-button'
77-
variant='contained'
78-
sx={{ height: 25, p: 0, mr: 1, ml: 1 }}
79-
type='button'
80-
// data-testid, prop for testing in RTL
81-
data-testid='play-button-test'
82-
//REMOVED DISPATCH FROM PLAY
8368
// @ts-ignore
8469
onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}
8570
>
86-
{playing ? 'Pause' : 'Play'}
87-
</Button>
71+
<div className='play-button-content'>
72+
{playing ? <Pause size={18} /> : <Play size={18} />}
73+
<span>{playing ? 'Pause' : 'Play'}</span>
74+
</div>
75+
</button>
8876
<Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
89-
9077
</div>
9178
);
9279
}

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

Lines changed: 0 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -38,128 +38,6 @@ $icon-primary: $primary-color-strong;
3838
$icon-secondary: lighten($primary-color-strong, 50%);
3939
$icon-bg: $primary-color-weak;
4040

41-
//the first window that pops up that checks for react devtools being installed
42-
$loader-background: $background-color;
43-
$loader-text: $dark-text;
44-
$loader-checks-border: $primary-color-strong;
45-
$launch-button: $primary-color-strong;
46-
$launch-button-hover: $primary-color;
47-
$launch-button-text: $light-text;
48-
49-
//Collapse and Toggle Record labels in the top left of the screen
50-
$collapse-text: $dark-text;
51-
$toggle-record-text: $dark-text;
52-
53-
//ACTION TAB COLORS (the main column on the left side)
54-
55-
//drop-down menu for selecting which tab Reactime is observing
56-
$tab-select-background: $background-color-weak;
57-
$tab-select-text: $dark-text;
58-
$tab-dropdown-background: $background-color-weak;
59-
$tab-dropdown-hover: darken($background-color-weak, 10%);
60-
$tab-vertical-line: lighten($contrasting-color, 30%);
61-
$tab-arrow-indicator: lighten($contrasting-color, 30%);
62-
63-
//SNAPSHOTS AND ROUTES LIST
64-
$action-tab-background: $background-color;
65-
$action-cont-border: $contrasting-color;
66-
$indiv-action-input-bg: $background-color-strong;
67-
$indiv-action-selected: darken($background-color, 15%);
68-
$indiv-action-selected-text: $light-text;
69-
$indiv-action-filler-text: lighten($contrasting-color, 60%);
70-
$indiv-action-custom-text: $dark-text;
71-
$indiv-action-border: $contrasting-color-weak;
72-
$indiv-action-time: $primary-color-weak;
73-
$indiv-action-time-text: $light-text;
74-
$time-button-height: 20px;
75-
$current: $contrasting-color-weak;
76-
$current-text: $light-text;
77-
$jump: $contrasting-color-weak;
78-
$jump-hover: $primary-color;
79-
$jump-text: $light-text;
80-
81-
//the State + Diff toggle // THIS FEATURE IS CURRENTLY COMMENTED OUT
82-
$header-background: $background-color;
83-
$header-button-active: $primary-color;
84-
$header-button-active-text: $light-text;
85-
$header-button-inactive: $primary-color-weak;
86-
$header-button-inactive-text: $dark-text;
87-
$header-button-hover: lighten($header-button-inactive, 20%);
88-
89-
//the buttons/tabs controlling what is displayed in STATECONTAINER (Map, Performance, History, Web Metrics, Tree)
90-
$navbar-background: $background-color; //this color only shows up in Diff mode when buttons don't fill the whole bar //DIFF FEATURE IS CURRENTLY COMMENTED OUT
91-
$navbar-selected: $primary-color-strong;
92-
$navbar-selected-text: $light-text;
93-
$navbar-unselected: $primary-color-weak;
94-
$navbar-unselected-text: $dark-text;
95-
$navbar-hover: darken($navbar-unselected, 15%);
96-
97-
$state-background: $background-color-strong;
98-
$state-cont-border: $contrasting-color;
99-
100-
//MAP TAB
101-
$map-options-label: $dark-text;
102-
//the dropdown colors are determined in the dropDownStyle object in LinkControls.tsx
103-
$map-link: $contrasting-color;
104-
// $map-root-fill: $primary-color; //root fill is currently a visx LinearGradient defined in ComponentMap.tsx
105-
$map-root-stroke: $primary-color;
106-
$map-root-text: $light-text;
107-
//$map-parent-fill: $primary-color-strong; //parent fill is currently a visx LinearGradient defined in ComponentMap.tsx
108-
$map-parent-stroke: darken($primary-color-strong, 20%);
109-
$map-parent-text: $light-text;
110-
$map-child-fill: $primary-color-weak;
111-
$map-child-stroke: lighten($primary-color, 50%);
112-
$map-child-text: $dark-text;
113-
114-
//PERFORMANCE TAB
115-
$performance-subtab-border: 1px;
116-
$performance-subtab-text: $contrasting-color;
117-
$performance-subtab-hover: $background-color-weak;
118-
$performance-options-dropdown: $primary-color-strong;
119-
$performance-options-label: $dark-text;
120-
$performance-save-series-button: $primary-color;
121-
$performance-save-series-button-text: $light-text;
122-
$perf-background: $background-color-strong;
123-
//axis tick colors and labels determined in BarGraph.tsx on line 29 and BarGraphComparison.tsx on line 39
124-
//on comparison view, button colors are in BarGraphComparison.tsx on line 220, 240
125-
126-
//HISTORY TAB
127-
$history-node: $primary-color; //this is currently set in History.tsx line 291
128-
$history-link: $contrasting-color; // this is currently set in d3graph.css line 26
129-
//$history-text: $light-text;
130-
131-
//WEB METRICS TAB
132-
//web metrics colors are selected in WebMetrics.tsx (text color line 69)
133-
$web-circles: $contrasting-color;
134-
$web-text: $dark-text;
135-
136-
$tree-background: $background-color;
137-
138-
//CONTORL BAR for time travel
139-
$travel-background: $background-color;
140-
$travel-top-border: lighten($contrasting-color, 50%);
141-
$play-button: $primary-strong-gradient;
142-
$play-button-text: $light-text;
143-
$slider-handle: $primary-strong-gradient;
144-
$slider-rail-left: $primary-color;
145-
$slider-rail-right: $background-color-weak;
146-
$scrub-button: $primary-strong-gradient;
147-
$scrub-icon: $light-text;
148-
$speed-dropdown: $primary-color-strong;
149-
$speed-dropdown-text: $light-text;
150-
$speed-dropdown-expanded: lighten($primary-color-strong, 20%);
151-
$speed-dropdown-expanded-hover: $primary-color;
152-
$speed-dropdown-expanded-text: $light-text;
153-
154-
//the buttons at the very bottom of the screen (locked, download, upload, tutorial, reconnect)
155-
$function-bar-background: $background-color;
156-
//outline color currently handled in mui theme.ts file
157-
$function-bar-button-outlines: $primary-color;
158-
$function-bar-text: $primary-color-strong;
159-
$function-bar-text-hover: $primary-color;
160-
$function-bar-text-highlight: $primary-color-strong;
161-
$function-bar-icons: $primary-color-strong;
162-
16341
//colors for pop-up window that opens when clicking the reconnect button
16442
$pop-up-window-background: $background-color;
16543
$pop-up-window-text: $dark-text;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@
7171
.jump-button,
7272
.current-location {
7373
min-width: 90px;
74-
height: 28px; /* Fixed height for better vertical centering */
75-
padding: 0 8px; /* Reduced vertical padding */
74+
height: 28px;
75+
padding: 0 8px;
7676
border-radius: 6px;
7777
font-size: 0.9375rem;
7878
font-weight: 500;

0 commit comments

Comments
 (0)