Skip to content

Commit 61c3e41

Browse files
garrettlchowgarrettlchow
committed
made buttons in buttons container flex to container size for larger screens
1 parent 5ee3365 commit 61c3e41

File tree

2 files changed

+118
-100
lines changed

2 files changed

+118
-100
lines changed

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 105 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -87,108 +87,118 @@ function ButtonsContainer(): JSX.Element {
8787

8888
return (
8989
<div className='buttons-container'>
90-
<Button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
91-
{paused ? (
92-
<Lock className='button-icon' size={18} />
93-
) : (
94-
<Unlock className='button-icon' size={18} />
95-
)}
96-
{paused ? 'Locked' : 'Unlocked'}
97-
</Button>
98-
<Button
99-
className='export-button'
100-
type='button'
101-
//@ts-ignore
102-
onClick={() => exportHandler(tabs[currentTab])}
103-
>
104-
<Download className='button-icon' size={18} />
105-
Download
106-
</Button>
107-
<Button className='import-button' onClick={() => importHandler(dispatch)}>
108-
<Upload className='button-icon' size={18} />
109-
Upload
110-
</Button>
111-
{/* The component below renders a button for the tutorial walkthrough of Reactime */}
112-
<Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
113-
{/* adding a button for reconnection functionality 10/5/2023 */}
114-
<Button
115-
className='reconnect-button'
116-
type='button'
117-
//update onClick functionality to include a popup that contains....
118-
onClick={handleReconnectClick}
119-
endIcon={
120-
<span style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
121-
<StatusDot status={connectionStatus ? 'active' : 'inactive'} />
122-
</span>
123-
}
124-
>
125-
<RefreshCw className='button-icon' size={18} />
126-
Reconnect
127-
</Button>
128-
<Dialog className='dialog-pop-up' open={reconnectDialogOpen} onClose={handleReconnectCancel}>
129-
<div className='close-icon-pop-up-div'>
130-
<CloseIcon
131-
type='button'
132-
onClick={() => handleReconnectCancel()}
133-
className='close-icon-pop-up'
134-
/>
135-
</div>
136-
<div className='warning-header-container'>
137-
<WarningIcon className='warning-icon-pop-up' />
138-
<DialogTitle className='dialog-pop-up-header'>WARNING</DialogTitle>
139-
</div>
140-
<DialogContent className='dialog-pop-up-contents'>
141-
<h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
142-
{connectionStatus ? (
143-
<>
144-
Reconnecting while Reactime is still connected to the application may cause unforeseen
145-
issues. Are you sure you want to proceed with the reconnection?
146-
</>
90+
<div className='buttons-wrapper'>
91+
<Button
92+
className='pause-button'
93+
type='button'
94+
onClick={() => dispatch(toggleMode('paused'))}
95+
>
96+
{paused ? (
97+
<Lock className='button-icon' size={18} />
14798
) : (
148-
<>
149-
Reactime has unexpectedly disconnected from your application. To continue using
150-
Reactime, please reconnect.
151-
<br />
152-
<br />
153-
WARNING: Reconnecting can sometimes cause unforeseen issues, consider downloading the
154-
data before proceeding with the reconnection, if needed.
155-
</>
99+
<Unlock className='button-icon' size={18} />
156100
)}
157-
</DialogContent>
158-
159-
<DialogActions className='dialog-pop-up-actions'>
160-
<Button
161-
onClick={() => handleReconnectCancel()}
162-
className='cancel-button-pop-up'
163-
type='button'
164-
variant='contained'
165-
style={{ backgroundColor: '#474c55' }}
166-
>
167-
Cancel
168-
</Button>
169-
{!connectionStatus && (
101+
{paused ? 'Locked' : 'Unlocked'}
102+
</Button>
103+
<Button
104+
className='export-button'
105+
type='button'
106+
//@ts-ignore
107+
onClick={() => exportHandler(tabs[currentTab])}
108+
>
109+
<Download className='button-icon' size={18} />
110+
Download
111+
</Button>
112+
<Button className='import-button' onClick={() => importHandler(dispatch)}>
113+
<Upload className='button-icon' size={18} />
114+
Upload
115+
</Button>
116+
{/* The component below renders a button for the tutorial walkthrough of Reactime */}
117+
<Tutorial dispatch={dispatch} currentTabInApp={currentTabInApp} />
118+
{/* adding a button for reconnection functionality 10/5/2023 */}
119+
<Button
120+
className='reconnect-button'
121+
type='button'
122+
//update onClick functionality to include a popup that contains....
123+
onClick={handleReconnectClick}
124+
endIcon={
125+
<span style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
126+
<StatusDot status={connectionStatus ? 'active' : 'inactive'} />
127+
</span>
128+
}
129+
>
130+
<RefreshCw className='button-icon' size={18} />
131+
Reconnect
132+
</Button>
133+
<Dialog
134+
className='dialog-pop-up'
135+
open={reconnectDialogOpen}
136+
onClose={handleReconnectCancel}
137+
>
138+
<div className='close-icon-pop-up-div'>
139+
<CloseIcon
140+
type='button'
141+
onClick={() => handleReconnectCancel()}
142+
className='close-icon-pop-up'
143+
/>
144+
</div>
145+
<div className='warning-header-container'>
146+
<WarningIcon className='warning-icon-pop-up' />
147+
<DialogTitle className='dialog-pop-up-header'>WARNING</DialogTitle>
148+
</div>
149+
<DialogContent className='dialog-pop-up-contents'>
150+
<h3>Status: {connectionStatus ? 'Connected' : 'Disconnected'}</h3>
151+
{connectionStatus ? (
152+
<>
153+
Reconnecting while Reactime is still connected to the application may cause
154+
unforeseen issues. Are you sure you want to proceed with the reconnection?
155+
</>
156+
) : (
157+
<>
158+
Reactime has unexpectedly disconnected from your application. To continue using
159+
Reactime, please reconnect.
160+
<br />
161+
<br />
162+
WARNING: Reconnecting can sometimes cause unforeseen issues, consider downloading
163+
the data before proceeding with the reconnection, if needed.
164+
</>
165+
)}
166+
</DialogContent>
167+
168+
<DialogActions className='dialog-pop-up-actions'>
170169
<Button
171-
// @ts-ignore
172-
onClick={() => exportHandler(tabs[currentTab])}
170+
onClick={() => handleReconnectCancel()}
171+
className='cancel-button-pop-up'
173172
type='button'
174-
className='download-button-pop-up'
175173
variant='contained'
176-
color='primary'
174+
style={{ backgroundColor: '#474c55' }}
177175
>
178-
Download
176+
Cancel
179177
</Button>
180-
)}
181-
<Button
182-
onClick={() => handleReconnectConfirm()}
183-
type='button'
184-
className='reconnect-button-pop-up'
185-
variant='contained'
186-
style={{ backgroundColor: '#F00008' }}
187-
>
188-
Reconnect
189-
</Button>
190-
</DialogActions>
191-
</Dialog>
178+
{!connectionStatus && (
179+
<Button
180+
// @ts-ignore
181+
onClick={() => exportHandler(tabs[currentTab])}
182+
type='button'
183+
className='download-button-pop-up'
184+
variant='contained'
185+
color='primary'
186+
>
187+
Download
188+
</Button>
189+
)}
190+
<Button
191+
onClick={() => handleReconnectConfirm()}
192+
type='button'
193+
className='reconnect-button-pop-up'
194+
variant='contained'
195+
style={{ backgroundColor: '#F00008' }}
196+
>
197+
Reconnect
198+
</Button>
199+
</DialogActions>
200+
</Dialog>
201+
</div>
192202
</div>
193203
);
194204
}

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
2-
* {
3-
font-family: 'Outfit', sans-serif;
4-
}
2+
53
.buttons-container {
64
display: flex;
75
align-items: center;
86
background: white;
97
border-top: 1px solid #e5e7eb;
10-
padding: 12px;
11-
gap: 8px;
8+
width: 100%;
9+
}
10+
11+
.buttons-wrapper {
12+
display: flex;
13+
align-items: center;
14+
justify-content: space-between;
15+
max-width: 1200px;
16+
width: 100%;
17+
margin: 0 auto;
18+
padding: 0 24px;
19+
gap: 16px;
1220
}
1321

1422
.introjs-tooltip {

0 commit comments

Comments
 (0)