Skip to content

Commit e2b1d3a

Browse files
johnwagejohnwage
committed
Change menu in top right corner & styling for Clear Canvas pop up
1 parent 1ec42eb commit e2b1d3a

File tree

7 files changed

+31
-29
lines changed

7 files changed

+31
-29
lines changed

‎app/src/Dashboard/Project.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ const Project = ({
158158
createModal({
159159
closeModal,
160160
children,
161-
message: 'Are you sure want to delete this project?',
161+
message: 'Are you sure you want to delete this project?',
162162
primBtnLabel: null,
163163
primBtnAction: null,
164164
secBtnAction: null,

‎app/src/components/right/LoginButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ export default function LoginButton() {
5454
if (state.isLoggedIn) {
5555
return (
5656
<button onClick={handleLogout}>
57-
Log out
5857
<svg
5958
xmlns="http://www.w3.org/2000/svg"
6059
width="16"
@@ -72,13 +71,13 @@ export default function LoginButton() {
7271
d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"
7372
/>
7473
</svg>
74+
<span>Log out</span>
7575
</button>
7676
);
7777
}
7878

7979
return (
8080
<button onClick={handleLogin}>
81-
Log in
8281
<svg
8382
xmlns="http://www.w3.org/2000/svg"
8483
width="16"
@@ -96,6 +95,7 @@ export default function LoginButton() {
9695
d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"
9796
/>
9897
</svg>
98+
<span>Log in</span>
9999
</button>
100100
);
101101
}

‎app/src/components/right/ProjectManager.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const ProjectManager = () => {
6464
createModal({
6565
closeModal,
6666
children,
67-
message: 'Are you sure want to delete all data?',
67+
message: 'Are you sure you want to delete all data?',
6868
primBtnLabel: null,
6969
primBtnAction: null,
7070
secBtnAction: null,

‎app/src/components/right/SimpleModal.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ const styles = (theme: any): any => ({
1313
maxWidth: '500px',
1414
height: 'auto',
1515
maxHeight: '500px',
16-
backgroundColor: theme.palette.background.paper,
16+
backgroundColor: '#31343A',
17+
color: 'white',
18+
borderRadius: '10px',
1719
boxShadow: theme.shadows[5],
1820
padding: '4%',
1921
minWidth: '500px',

‎app/src/components/top/NavBarButtons.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,8 @@ const navbarDropDown = (props) => {
121121
button
122122
onClick={resetState}
123123
style={{
124-
border: '1px solid #3c59ba',
124+
backgroundColor: '#E12D39',
125+
borderRadius: '50px',
125126
marginBottom: '2%',
126127
marginTop: '5%'
127128
}}
@@ -140,7 +141,7 @@ const navbarDropDown = (props) => {
140141
createModal({
141142
closeModal,
142143
children,
143-
message: 'Are you sure want to delete all data?',
144+
message: 'Are you sure you want to delete all data?',
144145
primBtnLabel: null,
145146
primBtnAction: null,
146147
secBtnAction: null,
@@ -189,7 +190,6 @@ const navbarDropDown = (props) => {
189190
<div data-testid="navDropDown" ref={ref} className={showMenu}>
190191
<Link to="/tutorial" style={{ textDecoration: 'none' }} target="_blank">
191192
<button>
192-
Tutorial
193193
<svg
194194
xmlns="http://www.w3.org/2000/svg"
195195
width="16"
@@ -200,10 +200,10 @@ const navbarDropDown = (props) => {
200200
>
201201
<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
202202
</svg>
203+
<span>Tutorial</span>
203204
</button>
204205
</Link>
205206
<button onClick={() => clearWorkspace()}>
206-
Clear Canvas
207207
<svg
208208
xmlns="http://www.w3.org/2000/svg"
209209
width="16"
@@ -214,10 +214,10 @@ const navbarDropDown = (props) => {
214214
>
215215
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" />
216216
</svg>
217+
<span>Clear Canvas</span>
217218
</button>
218219
{state.isLoggedIn && (
219220
<button onClick={handleClick}>
220-
Manage Project
221221
<svg
222222
xmlns="http://www.w3.org/2000/svg"
223223
width="16"
@@ -228,11 +228,11 @@ const navbarDropDown = (props) => {
228228
>
229229
<path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313ZM13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A4.92 4.92 0 0 0 13 5.698ZM14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13V4Zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A4.92 4.92 0 0 0 13 8.698Zm0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525Z" />
230230
</svg>
231+
<span>Manage Project</span>
231232
</button>
232233
)}
233234
<Link to="/marketplace" style={{ textDecoration: 'none' }}>
234235
<button>
235-
Marketplace
236236
<svg
237237
xmlns="http://www.w3.org/2000/svg"
238238
width="16"
@@ -247,6 +247,7 @@ const navbarDropDown = (props) => {
247247
/>
248248
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
249249
</svg>
250+
<span>Marketplace</span>
250251
</button>
251252
</Link>
252253
<LoginButton />

‎app/src/components/top/NewExportButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function NewExportButton(): React.JSX.Element {
4040
marginTop: '5%'
4141
}}
4242
>
43-
<ListItemText primary={option} style={{ textAlign: 'center' }} />
43+
<ListItemText primary={option} style={{ textAlign: 'center'}} />
4444
</ListItem>
4545
))}
4646
</List>

‎app/src/public/styles/style.css

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -610,15 +610,13 @@ NAVBAR
610610

611611
.navDropDown {
612612
position: absolute;
613-
border: 1px solid #555;
614-
width: 20vw;
615-
border-radius: 5px;
613+
width: 230px;
614+
border-radius: 8px;
616615
right: 1vw;
617616
z-index: 10;
618-
background-color: rgba(0, 0, 0, 0.9);
617+
background-color: #31343A;
619618
top: 45px;
620-
padding-top: 5px;
621-
padding-bottom: 5px;
619+
padding: 10px 0;
622620
display: hidden;
623621
}
624622

@@ -627,32 +625,33 @@ NAVBAR
627625
}
628626

629627
.navDropDown button {
630-
width: 90%;
631-
margin: 3px 5%;
632-
background-color: #333333;
633-
color: white;
634-
padding-top: 5px;
635-
padding-bottom: 5px;
636-
border-radius: 5px;
628+
width: 100%;
629+
background-color: #31343A;
630+
color: #D9DADA;
631+
padding: 9px 25px;
637632
display: flex;
638633
align-items: center;
634+
border: none;
635+
}
636+
637+
.navDropDown span {
638+
margin-left: -25px;
639639
}
640640

641641
.navDropDown p {
642642
margin: 3px 5%;
643-
color: whitesmoke;
643+
color: #D9DADA;
644644
}
645645

646646
.navDropDown button:hover {
647647
cursor: pointer;
648-
background-color: #555;
648+
background-color: #393C42;
649649
}
650650

651651
.navDropDown button svg {
652652
width: 20px;
653653
height: 20px;
654-
margin-left: 8px;
655-
color: white;
654+
color: gray;
656655
}
657656

658657
#navbarButton {

0 commit comments

Comments
 (0)