Skip to content

Commit 90e8abb

Browse files
ViaLeenyViaLeeny
committed
Add grid styling
1 parent 04aee01 commit 90e8abb

File tree

1 file changed

+139
-109
lines changed

1 file changed

+139
-109
lines changed

‎app/src/containers/ProfileContainer.tsx

Lines changed: 139 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
CardContent,
1010
Button,
1111
Typography,
12-
Divider
12+
Divider,
13+
Grid
1314
} from '@mui/material';
1415
import { ThemeProvider } from '@mui/material/styles';
1516
import NavBar from '../components/top/NavBar';
@@ -65,12 +66,15 @@ const ProfileContainer = (): JSX.Element => {
6566
<NavBar />
6667
</div>
6768
</ThemeProvider>
68-
<div>
69-
<Card
70-
sx={{ minWidth: 275, color: 'white', backgroundColor: '#1E2024' }}
71-
variant="outlined"
72-
>
73-
{/* BACK BUTTON
69+
<div className={classes.gridContainer}>
70+
<Grid container spacing={3}>
71+
{/* Card 1 */}
72+
<Grid item xs={12} sm={6} md={4}>
73+
<Card
74+
sx={{ minWidth: 275, color: 'white', backgroundColor: '#1E2024' }}
75+
variant="outlined"
76+
>
77+
{/* BACK BUTTON
7478
<p
7579
onClick={() => window.history.back()}
7680
style={{
@@ -82,125 +86,151 @@ const ProfileContainer = (): JSX.Element => {
8286
>
8387
X
8488
</p> */}
85-
<CardContent>
86-
<Typography
87-
sx={{ fontSize: 14 }}
88-
color="rgba(255, 255, 255, 0.7);
89+
<CardContent>
90+
<Typography
91+
sx={{ fontSize: 14 }}
92+
color="rgba(255, 255, 255, 0.7);
8993
"
90-
gutterBottom
91-
>
92-
Hello,
93-
</Typography>
94-
<Typography variant="h5" component="div" sx={{ color: '#0671E3' }}>
95-
{username || 'Guest'}
96-
</Typography>
97-
<Typography
98-
sx={{ mb: 1.5, marginTop: '7px' }}
99-
color="rgba(255, 255, 255, 0.7);
94+
gutterBottom
95+
>
96+
Hello,
97+
</Typography>
98+
<Typography
99+
variant="h5"
100+
component="div"
101+
sx={{ color: '#0671E3' }}
102+
>
103+
{username || 'Guest'}
104+
</Typography>
105+
<Typography
106+
sx={{ mb: 1.5, marginTop: '7px' }}
107+
color="rgba(255, 255, 255, 0.7);
100108
"
101-
>
102-
Welcome to Reactype!
103-
</Typography>
104-
{email ? (
105-
<Typography variant="body2">
106-
Email:
107-
<br />
108-
{email}
109-
</Typography>
110-
) : null}
111-
</CardContent>
109+
>
110+
Welcome to Reactype!
111+
</Typography>
112+
{email ? (
113+
<Typography variant="body2">
114+
Email:
115+
<br />
116+
{email}
117+
</Typography>
118+
) : null}
119+
</CardContent>
112120

113-
<Divider />
121+
<Divider />
114122

115-
<CardContent>
116-
<Typography variant="h6" component="div" sx={{ color: 'white' }}>
117-
Apps
118-
</Typography>
119-
<Typography
120-
sx={{ mb: 1.5, marginTop: '8px' }}
121-
color="rgba(255, 255, 255, 0.7);
123+
<CardContent>
124+
<Typography
125+
variant="h6"
126+
component="div"
127+
sx={{ color: 'white' }}
128+
>
129+
Apps
130+
</Typography>
131+
<Typography
132+
sx={{ mb: 1.5, marginTop: '8px' }}
133+
color="rgba(255, 255, 255, 0.7);
122134
"
123-
>
124-
Create a web app or a native mobile app to build a custom internal
125-
tool for your business.
126-
</Typography>
127-
</CardContent>
135+
>
136+
Create a web app or a native mobile app to build a custom
137+
internal tool for your business.
138+
</Typography>
139+
</CardContent>
128140

129-
<Divider />
141+
<Divider />
130142

131-
<CardContent>
132-
<Typography variant="h6" component="div" sx={{ color: 'white' }}>
133-
Resources
134-
</Typography>
135-
<Typography
136-
sx={{ mb: 1.5, marginTop: '8px' }}
137-
color="rgba(255, 255, 255, 0.7);
143+
<CardContent>
144+
<Typography
145+
variant="h6"
146+
component="div"
147+
sx={{ color: 'white' }}
148+
>
149+
Resources
150+
</Typography>
151+
<Typography
152+
sx={{ mb: 1.5, marginTop: '8px' }}
153+
color="rgba(255, 255, 255, 0.7);
138154
"
139-
>
140-
Securely connect your data and display it inside of Reactype apps.
141-
</Typography>
142-
</CardContent>
143-
<CardActions>
144-
<Button
145-
size="small"
146-
sx={{
147-
color: '#0671E3',
148-
textTransform: 'capitalize',
149-
fontSize: '14px'
150-
}}
151-
href="https://react.dev/learn"
152-
>
153-
React docs
154-
</Button>
155-
</CardActions>
155+
>
156+
Securely connect your data and display it inside of Reactype
157+
apps.
158+
</Typography>
159+
</CardContent>
160+
<CardActions>
161+
<Button
162+
size="small"
163+
sx={{
164+
color: '#0671E3',
165+
textTransform: 'capitalize',
166+
fontSize: '14px'
167+
}}
168+
href="https://react.dev/learn"
169+
>
170+
React docs
171+
</Button>
172+
</CardActions>
156173

157-
<Divider />
174+
<Divider />
158175

159-
<CardContent>
160-
<Typography variant="h6" component="div" sx={{ color: 'white' }}>
161-
Database
162-
</Typography>
163-
<Typography
164-
sx={{ mb: 1.5, marginTop: '8px' }}
165-
color="rgba(255, 255, 255, 0.7);
176+
<CardContent>
177+
<Typography
178+
variant="h6"
179+
component="div"
180+
sx={{ color: 'white' }}
181+
>
182+
Database
183+
</Typography>
184+
<Typography
185+
sx={{ mb: 1.5, marginTop: '8px' }}
186+
color="rgba(255, 255, 255, 0.7);
166187
"
167-
>
168-
Easily store data in a free SQL database and power your Reactype
169-
app.
170-
</Typography>
171-
</CardContent>
172-
<CardActions>
173-
<Button
174-
size="small"
175-
sx={{
176-
color: '#0671E3',
177-
textTransform: 'capitalize',
178-
fontSize: '14px'
179-
}}
180-
href="https://www.mongodb.com/"
181-
>
182-
MongoDB
183-
</Button>
184-
<Button
185-
size="small"
186-
sx={{
187-
color: '#0671E3',
188-
textTransform: 'capitalize',
189-
fontSize: '14px'
190-
}}
191-
href="https://aws.amazon.com/what-is/sql/#:~:text=Structured%20query%20language%20(SQL)%20is,relationships%20between%20the%20data%20values."
192-
>
193-
AWS SQL
194-
</Button>
195-
</CardActions>
196-
<Divider />
197-
</Card>
188+
>
189+
Easily store data in a free SQL database and power your
190+
Reactype app.
191+
</Typography>
192+
</CardContent>
193+
<CardActions>
194+
<Button
195+
size="small"
196+
sx={{
197+
color: '#0671E3',
198+
textTransform: 'capitalize',
199+
fontSize: '14px'
200+
}}
201+
href="https://www.mongodb.com/"
202+
>
203+
MongoDB
204+
</Button>
205+
<Button
206+
size="small"
207+
sx={{
208+
color: '#0671E3',
209+
textTransform: 'capitalize',
210+
fontSize: '14px'
211+
}}
212+
href="https://aws.amazon.com/what-is/sql/#:~:text=Structured%20query%20language%20(SQL)%20is,relationships%20between%20the%20data%20values."
213+
>
214+
AWS SQL
215+
</Button>
216+
</CardActions>
217+
<Divider />
218+
</Card>
219+
</Grid>
220+
</Grid>
198221
</div>
199222
</>
200223
);
201224
};
202225

203226
const useStyles = makeStyles({
227+
gridContainer: {
228+
display: 'flex',
229+
flexWrap: 'wrap',
230+
justifyContent: 'center',
231+
gap: '20px',
232+
padding: '20px'
233+
},
204234
panelWrapper: {
205235
display: 'flex',
206236
flexDirection: 'column',

0 commit comments

Comments
 (0)