Skip to content

Commit abbbc24

Browse files
lu0713lu0713
committed
deleted Grid from Application.tsx - about to merge Application.tsx directly into Occupied.tsx
1 parent 96ea58c commit abbbc24

13 files changed

Lines changed: 110 additions & 67 deletions

‎app/assets/cliffs_long_resized.png‎

-1.95 MB
Binary file not shown.

‎app/assets/mountain_long.png‎

-4.93 MB
Binary file not shown.

‎app/assets/mountain_long_bright.png‎

-2.42 MB
Binary file not shown.

‎app/assets/mountain_long_resized.png‎

-1.24 MB
Binary file not shown.

‎app/assets/mountain_long_resized_again.png‎

-1.7 MB
Binary file not shown.

‎app/assets/mountain_long_resized_bright.png‎

-2.68 MB
Binary file not shown.

‎app/assets/mountain_long_resized_last.png‎

-1.99 MB
Binary file not shown.

‎app/components/Applications.tsx‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { makeStyles } from '@material-ui/core/styles';
1313

1414
import { DashboardContext } from '../context/DashboardContext';
1515
import ServicesModal from '../modals/ServicesModal';
16-
import '../stylesheets/Applications.css';
16+
import '../stylesheets/Applications.scss';
1717

1818
type ClickEvent = React.MouseEvent<HTMLElement>;
1919

@@ -48,16 +48,17 @@ const Applications = () => {
4848
const useStyles = makeStyles(theme => ({
4949
// card: myPostgres, myMongo, ToddDB buttons
5050
paper: {
51-
height: 340,
51+
height: 280,
52+
width: 280,
5253
textAlign: 'center',
5354
color: 'rgba(33, 34, 41, 1.2)',
5455
whiteSpace: 'nowrap',
5556
backgroundColor: '#ffffff',
56-
// border: '3px ridge #808080',
57+
borderRadius: 8,
5758
border: '0',
58-
boxShadow: '0 10px 10px rgba(0,0,0,0.5)',
59+
boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
5960
'&:hover, &.Mui-focusVisible': {
60-
backgroundColor: 'rgb(61, 67, 78)',
61+
backgroundColor: `#ccd8e1`,
6162
color: '#ffffff',
6263
},
6364
},
@@ -73,55 +74,58 @@ const Applications = () => {
7374
position: 'relative',
7475
top: 50,
7576
margin: '0 auto',
76-
color: '#e0e7ef',
77-
backgroundColor: 'transparent',
78-
},
79-
fontStyles: {
80-
fontSize: '3rem',
81-
[theme.breakpoints.up('lg')]: {
82-
fontSize: '2.75rem',
83-
// MAIN PAGE SQUARE BUTTON FONTS
84-
fontFamily: 'Inter'
85-
},
77+
color: '#eeeeee',
78+
backgroundColor: '#ccd8e1',
79+
opacity: 1,
80+
'&:hover': {
81+
color: '#ffffff',
82+
backgroundColor: 'transparent'
83+
}
8684
},
85+
// fontStyles: {
86+
// fontSize: '16px',
87+
// [theme.breakpoints.up('lg')]: {
88+
// fontSize: '18px',
89+
// // MAIN PAGE SQUARE BUTTON FONTS
90+
// fontFamily: 'Inter'
91+
// },
92+
// },
8793
}));
8894

8995
const classes = useStyles();
9096

9197
return (
92-
<>
98+
<div className="cardContainer">
9399
{applications.map((app: string[], i: number | any | string | undefined) => (
94-
<Grid item lg={4} md={6} sm={12} key={i}>
95-
<div id="card-hover">
96-
<Card
97-
// key={`card-${i}`}
98-
className={classes.paper}
99-
variant="outlined"
100-
onClick={event => handleClick(event, app[0], i)}
101-
>
102-
<CardHeader
103-
avatar={
104-
<IconButton
105-
ref={element => (delRef.current[i] = element)}
106-
className={classes.hover}
107-
aria-label="Delete"
108-
onClick={event => confirmDelete(event, app[0], i)}
109-
>
110-
<DeleteForeverOutlinedIcon />
111-
</IconButton>
112-
}
113-
></CardHeader>
114-
<CardContent>
115-
<Typography className={classes.fontStyles}>{app[0]}</Typography>
116-
</CardContent>
117-
</Card>
118-
</div>
119-
</Grid>
100+
<div id={'card-hover'}>
101+
<Card
102+
key={`card-${i}`}
103+
className={classes.paper}
104+
variant="outlined"
105+
onClick={event => handleClick(event, app[0], i)}
106+
>
107+
<CardHeader
108+
avatar={
109+
<IconButton
110+
ref={element => (delRef.current[i] = element)}
111+
className={classes.hover}
112+
aria-label="Delete"
113+
onClick={event => confirmDelete(event, app[0], i)}
114+
>
115+
<DeleteForeverOutlinedIcon />
116+
</IconButton>
117+
}
118+
></CardHeader>
119+
<CardContent>
120+
<Typography className={'cardContent'}>{app[0]}</Typography>
121+
</CardContent>
122+
</Card>
123+
</div>
120124
))}
121125
<Modal open={open} onClose={() => setOpen(false)}>
122126
<ServicesModal i={index} app={app} />
123127
</Modal>
124-
</>
128+
</div>
125129
);
126130
};
127131

‎app/components/Copyright.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Typography, Link } from '@material-ui/core';
33
import { makeStyles } from '@material-ui/core/styles';
4-
import '../stylesheets/Applications.css';
4+
import '../stylesheets/Applications.scss';
55

66
export interface CopyrightProps {}
77

‎app/components/Occupied.tsx‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,38 @@ const Occupied: React.FC = () => {
2424
const useStyles = makeStyles<Theme, StyleProps>(theme => ({
2525
// card: "+" button only
2626
paper: {
27-
color: 'rgba(33, 34, 41, 0.75)',
28-
height: 340,
29-
width: '100%',
27+
height: 280,
28+
width: 280,
29+
textAlign: 'center',
30+
color: 'rgba(33, 34, 41, 1.2)',
31+
whiteSpace: 'nowrap',
3032
backgroundColor: '#ffffff',
31-
// border: '3px ridge #808080',
33+
borderRadius: 8,
3234
border: '0',
33-
boxShadow: '0 10px 10px rgba(0,0,0,0.5)',
35+
boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
3436
'&:hover, &.Mui-focusVisible': {
35-
backgroundColor: 'rgb(61, 67, 78)',
37+
backgroundColor: `#ccd8e1`,
3638
color: '#ffffff',
3739
},
3840
},
39-
grid: {
40-
margin: '0 auto',
41-
maxWidth: '65vw',
42-
maxHeight: '75vh',
43-
},
4441
icon: {
4542
width: '75px',
4643
height: '75px',
4744
boxShadow: 'none',
45+
color: '#999999',
4846
},
4947
}));
5048

5149
const classes = useStyles({} as StyleProps);
50+
51+
function append(parent:any, child:any) {
52+
const parentNode: HTMLElement = document.querySelector(parent);
53+
const childNode: HTMLElement = document.querySelector(child);
54+
return parentNode.append(childNode);
55+
}
5256

5357
return (
58+
5459
<div>
5560
<div className="sidebarArea">
5661
</div>
@@ -78,14 +83,10 @@ const Occupied: React.FC = () => {
7883
<Modal open={open} onClose={() => setOpen(false)}>
7984
<AddModal setOpen={setOpen} />
8085
</Modal>
81-
<Grid className={classes.grid} container spacing={3}>
82-
<Grid item lg={4} md={6} sm={12}>
83-
<Button className={classes.paper} onClick={() => setOpen(true)}>
84-
<AddCircleOutlineTwoToneIcon className={classes.icon} />
85-
</Button>
86-
</Grid>
87-
<Applications />
88-
</Grid>
86+
<Button className={classes.paper} onClick={() => setOpen(true)}>
87+
<AddCircleOutlineTwoToneIcon className={classes.icon} />
88+
</Button>
89+
<Applications />
8990
</div>
9091
</div>
9192
);

0 commit comments

Comments
 (0)