Skip to content

Commit 38a9946

Browse files
jimmallyjimmally
authored
Merge pull request #24 from oslabs-beta/PopUpStyling
UI styling for our pop up reconnect feature complete
2 parents b0099aa + 6559d31 commit 38a9946

File tree

4 files changed

+119
-14
lines changed

4 files changed

+119
-14
lines changed

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import FileUploadIcon from '@mui/icons-material/FileUpload';
1212
import { toggleMode, importSnapshots, startReconnect } from '../RTKslices';
1313
import { useDispatch, useSelector } from 'react-redux';
1414
import StatusDot from '../components/StatusDot';
15+
import LoopIcon from '@mui/icons-material/Loop';
16+
import CloseIcon from '@mui/icons-material/Close';
1517

1618
function exportHandler(snapshots: []): void { // function that takes in our tabs[currentTab] object to be exported as a JSON file. NOTE: TypeScript needs to be updated
1719
const fileDownload: HTMLAnchorElement = document.createElement('a'); // invisible HTML element that will hold our tabs[currentTab] object
@@ -118,26 +120,35 @@ function ButtonsContainer(): JSX.Element {
118120
</span>
119121
}
120122
>
123+
<LoopIcon sx={{ pr: 1 }} />
121124
Reconnect
122125
</Button>
123-
<Dialog open={reconnectDialogOpen} onClose={handleReconnectCancel}>
124-
<DialogTitle>WARNING</DialogTitle>
125-
<DialogContent>
126-
{/* //insert info here on current connection status */}
127-
<h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
128-
{connectionStatus
129-
? 'Reconnecting while Reactime is still connected to application will clear all current data. Are you sure you want to proceed with the reconnection?'
130-
: 'Reactime has unexpectedly disconnected from your application. To continue using Reactime, please reconnect. WARNING: Reconnecting will clear all data currently stored in Reactime, so consider downloading the data before proceeding with the reconnection, if needed' }
126+
<Dialog className="dialog-pop-up"open={reconnectDialogOpen} onClose={handleReconnectCancel}>
127+
<div className='close-icon-pop-up-div' >
128+
<CloseIcon type="button" onClick={() => handleReconnectCancel()} className='close-icon-pop-up'/>
129+
</div>
130+
<DialogTitle className='dialog-pop-up-header'>WARNING</DialogTitle>
131+
<DialogContent className='dialog-pop-up-contents'>
132+
<h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
133+
{connectionStatus
134+
? <>
135+
Reconnecting while Reactime is still connected to the application will clear all current data. Are you sure you want to proceed with the reconnection?
136+
</>
137+
: <>
138+
Reactime has unexpectedly disconnected from your application. To continue using Reactime, please reconnect.
139+
<br />
140+
WARNING: Reconnecting will clear all data currently stored in Reactime, so consider downloading the data before proceeding with the reconnection, if needed.
141+
</>}
131142
</DialogContent>
132-
{/* I don't know how to split this up ^ I wanted there to be a break between "please reconnect." and "WARNING:" but idk how */}
133-
<DialogActions>
134-
<Button onClick={() => handleReconnectCancel()} color="primary">
143+
144+
<DialogActions className='dialog-pop-up-actions'>
145+
<Button onClick={() => handleReconnectCancel()} className="cancel-button-pop-up" type="button" variant="contained" style={{ backgroundColor: '#474c55' }}>
135146
Cancel
136147
</Button>
137-
{ !connectionStatus && <Button onClick={() => exportHandler(tabs[currentTab])} color="primary">
148+
{!connectionStatus && <Button onClick={() => exportHandler(tabs[currentTab])} type="button" className="download-button-pop-up" variant="contained" color="primary">
138149
Download
139150
</Button> }
140-
<Button onClick={() => handleReconnectConfirm()} color="primary">
151+
<Button onClick={() => handleReconnectConfirm()} type="button" className="reconnect-button-pop-up" variant="contained" style={{ backgroundColor: '#F00008' }}>
141152
Reconnect
142153
</Button>
143154
</DialogActions>

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

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,8 @@
185185
.import-button:hover,
186186
.howToUse-button:hover,
187187
.export-button:hover,
188-
.pause-button:hover {
188+
.pause-button:hover,
189+
.reconnect-button:hover {
189190
@extend %button-shared;
190191
color: #62d6fb;
191192
box-shadow: 1px 1px 2px 1px rgba(30, 86, 171, 0.25);
@@ -368,3 +369,58 @@ aside {
368369
}
369370

370371
/* ^ sidebar button open and closing functionality */
372+
.reconnect-button-pop-up {
373+
padding: 3px;
374+
outline: transparent;
375+
background: $red-color-gradient;
376+
color: $text-color !important;
377+
border: none;
378+
border-radius: 3px;
379+
cursor: pointer;
380+
line-height: 1.5em;
381+
font: 500 $button-text-size $text-font-stack;
382+
width: 120px;
383+
&:hover {
384+
color: black !important;
385+
background-color: $highlight-color;
386+
}
387+
}
388+
389+
.cancel-button-pop-up {
390+
padding: 3px;
391+
outline: transparent;
392+
color: black;
393+
border: none;
394+
border-radius: 3px;
395+
cursor: pointer;
396+
line-height: 1.5em;
397+
font: 500 $button-text-size $text-font-stack;
398+
width: 120px;
399+
&:hover {
400+
color: $text-color;
401+
background-color: $highlight-color;
402+
}
403+
}
404+
405+
.close-icon-pop-up {
406+
cursor: pointer;
407+
color: $text-color;
408+
font-size: 20px;
409+
padding-right: 10px;
410+
}
411+
412+
.download-button-pop-up {
413+
cursor: pointer;
414+
border: none;
415+
font: 500 $button-text-size $text-font-stack;
416+
width: 120px;
417+
border-radius: 3px;
418+
line-height: 1.5em;
419+
outline: transparent;
420+
background: $blue-color-gradient;
421+
box-shadow: $box-shadow-blue;
422+
&:hover {
423+
color: $text-color;
424+
background-color: $highlight-color;
425+
}
426+
}

‎src/app/styles/layout/_buttonsContainer.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,40 @@
6969
background: none;
7070
outline: none;
7171
}
72+
73+
.dialog-pop-up {
74+
border: 1px solid $border-color;
75+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
76+
}
77+
78+
.dialog-pop-up-header {
79+
background-color: $brand-color;
80+
color: $text-color;
81+
padding: 12px 20px;
82+
font-size: 20px;
83+
font-family: $text-font-stack;
84+
}
85+
86+
.dialog-pop-up-contents {
87+
padding: 20px;
88+
background-color: $brand-color;
89+
color: $text-color;
90+
font-family: $text-font-stack;
91+
line-height: 1.4;
92+
}
93+
94+
.dialog-pop-up-actions {
95+
padding: 15px;
96+
background-color: $head-color;
97+
}
98+
99+
100+
.close-icon-pop-up-div {
101+
height: 40px;
102+
width: 100%;
103+
background-color: $light-background-color;
104+
display: flex;
105+
justify-content: flex-end;
106+
align-items: center;
107+
}
108+

‎src/app/styles/layout/_mainContainer.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@
88
.state-container-container{
99
display: contents;
1010
}
11+

0 commit comments

Comments
 (0)