Skip to content

Commit 4ac4663

Browse files
ViaLeenyViaLeeny
committed
Fix profile styling
1 parent 90e8abb commit 4ac4663

File tree

1 file changed

+124
-143
lines changed

1 file changed

+124
-143
lines changed

‎app/src/containers/ProfileContainer.tsx

Lines changed: 124 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -66,156 +66,137 @@ const ProfileContainer = (): JSX.Element => {
6666
<NavBar />
6767
</div>
6868
</ThemeProvider>
69+
<CardContent sx={{ textAlign: 'center' }}>
70+
<div style={{ display: 'flex', justifyContent: 'center' }}>
71+
<Typography variant="h5" component="div" sx={{ color: 'white', marginRight: '8px' }}>
72+
{'Hello, '}
73+
</Typography>
74+
<Typography variant="h5" component="div" sx={{ color: '#0671E3' }}>
75+
{`${username || ' Guest'}`}
76+
</Typography>
77+
</div>
78+
<Typography
79+
sx={{ mb: 1.5, marginTop: '7px' }}
80+
color="rgba(255, 255, 255, 0.7);"
81+
>
82+
Welcome to Reactype!
83+
</Typography>
84+
{email ? (
85+
<Typography variant="body2">
86+
Email:
87+
<br />
88+
{email}
89+
</Typography>
90+
) : null}
91+
</CardContent>
6992
<div className={classes.gridContainer}>
70-
<Grid container spacing={3}>
93+
<Grid
94+
container
95+
spacing={3}
96+
sx={{ minWidth: 275, color: 'white', backgroundColor: '#1E2024' }}
97+
>
7198
{/* Card 1 */}
72-
<Grid item xs={12} sm={6} md={4}>
73-
<Card
74-
sx={{ minWidth: 275, color: 'white', backgroundColor: '#1E2024' }}
75-
variant="outlined"
99+
{/* <Card> */}
100+
{/* BACK BUTTON
101+
<p
102+
onClick={() => window.history.back()}
103+
style={{
104+
position: 'absolute',
105+
right: '50px',
106+
border: '1px solid rgba(255, 255, 255, 0.7)',
107+
padding: '7px 10px'
108+
}}
76109
>
77-
{/* BACK BUTTON
78-
<p
79-
onClick={() => window.history.back()}
80-
style={{
81-
position: 'absolute',
82-
right: '50px',
83-
border: '1px solid rgba(255, 255, 255, 0.7)',
84-
padding: '7px 10px'
85-
}}
86-
>
87-
X
88-
</p> */}
89-
<CardContent>
90-
<Typography
91-
sx={{ fontSize: 14 }}
92-
color="rgba(255, 255, 255, 0.7);
93-
"
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);
108-
"
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>
110+
X
111+
</p> */}
120112

121-
<Divider />
122-
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);
113+
<Divider />
114+
<Grid item xs={12} sm={6} md={4}>
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);
134122
"
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>
140-
141-
<Divider />
123+
>
124+
Create a web app or a native mobile app to build a custom
125+
internal tool for your business.
126+
</Typography>
127+
</CardContent>
128+
</Grid>
142129

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);
130+
<Divider sx={{ marginBottom: '16px' }}/>
131+
<Grid item xs={12} sm={6} md={4}>
132+
<CardContent>
133+
<Typography variant="h6" component="div" sx={{ color: 'white' }}>
134+
Resources
135+
</Typography>
136+
<Typography
137+
sx={{ mb: 1.5, marginTop: '8px' }}
138+
color="rgba(255, 255, 255, 0.7);
154139
"
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>
173-
174-
<Divider />
175-
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);
140+
>
141+
Securely connect your data and display it inside of Reactype
142+
apps.
143+
</Typography>
144+
</CardContent>
145+
<CardActions>
146+
<Button
147+
size="small"
148+
sx={{
149+
color: '#0671E3',
150+
textTransform: 'capitalize',
151+
fontSize: '14px'
152+
}}
153+
href="https://react.dev/learn"
154+
>
155+
React docs
156+
</Button>
157+
</CardActions>
158+
</Grid>
159+
<Divider />
160+
<Grid item xs={12} sm={6} md={4}>
161+
<CardContent>
162+
<Typography variant="h6" component="div" sx={{ color: 'white' }}>
163+
Database
164+
</Typography>
165+
<Typography
166+
sx={{ mb: 1.5, marginTop: '8px' }}
167+
color="rgba(255, 255, 255, 0.7);
187168
"
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>
169+
>
170+
Easily store data in a free SQL database and power your Reactype
171+
app.
172+
</Typography>
173+
</CardContent>
174+
<CardActions>
175+
<Button
176+
size="small"
177+
sx={{
178+
color: '#0671E3',
179+
textTransform: 'capitalize',
180+
fontSize: '14px'
181+
}}
182+
href="https://www.mongodb.com/"
183+
>
184+
MongoDB
185+
</Button>
186+
<Button
187+
size="small"
188+
sx={{
189+
color: '#0671E3',
190+
textTransform: 'capitalize',
191+
fontSize: '14px'
192+
}}
193+
href="https://aws.amazon.com/what-is/sql/#:~:text=Structured%20query%20language%20(SQL)%20is,relationships%20between%20the%20data%20values."
194+
>
195+
AWS SQL
196+
</Button>
197+
</CardActions>
198+
<Divider />
199+
{/* </Card> */}
219200
</Grid>
220201
</Grid>
221202
</div>
@@ -228,7 +209,7 @@ const useStyles = makeStyles({
228209
display: 'flex',
229210
flexWrap: 'wrap',
230211
justifyContent: 'center',
231-
gap: '20px',
212+
// gap: '20px',
232213
padding: '20px'
233214
},
234215
panelWrapper: {

0 commit comments

Comments
 (0)