Skip to content

Commit 04aee01

Browse files
ViaLeenyViaLeeny
committed
Add navbar
1 parent 7fa0bdf commit 04aee01

File tree

2 files changed

+132
-117
lines changed

2 files changed

+132
-117
lines changed

‎app/src/containers/AppContainer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ const AppContainer: React.FC = () => {
4848
// useHistory hook to grab the url, if it is /marketplace then selectively render MarketplaceContainer
4949
const urlAdd = useHistory();
5050
const isMarketplace = urlAdd.location.pathname === '/marketplace';
51-
const isProfile = urlAdd.location.pathname === '/profile';
5251

5352
return (
5453
<StyledEngineProvider injectFirst>

‎app/src/containers/ProfileContainer.tsx

Lines changed: 132 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import {
1111
Typography,
1212
Divider
1313
} from '@mui/material';
14+
import { ThemeProvider } from '@mui/material/styles';
15+
import NavBar from '../components/top/NavBar';
16+
import { theme1 } from '../public/styles/theme';
1417

1518
const bull = (
1619
<Box
@@ -53,134 +56,147 @@ const ProfileContainer = (): JSX.Element => {
5356
}
5457
}, []);
5558

59+
const lightTheme = theme1;
60+
5661
return (
57-
<Card
58-
sx={{ minWidth: 275, color: 'white', backgroundColor: '#1E2024' }}
59-
variant="outlined"
60-
>
61-
<p
62-
onClick={() => window.history.back()}
63-
style={{
64-
position: 'absolute',
65-
right: '50px',
66-
border: '1px solid rgba(255, 255, 255, 0.7)',
67-
padding: '7px 10px'
68-
}}
69-
>
70-
X
71-
</p>
72-
<CardContent>
73-
<Typography
74-
sx={{ fontSize: 14 }}
75-
color="rgba(255, 255, 255, 0.7);
76-
"
77-
gutterBottom
62+
<>
63+
<ThemeProvider theme={lightTheme}>
64+
<div>
65+
<NavBar />
66+
</div>
67+
</ThemeProvider>
68+
<div>
69+
<Card
70+
sx={{ minWidth: 275, color: 'white', backgroundColor: '#1E2024' }}
71+
variant="outlined"
7872
>
79-
Hello,
80-
</Typography>
81-
<Typography variant="h5" component="div" sx={{ color: '#0671E3' }}>
82-
{username ? username : 'Guest'}
83-
</Typography>
84-
<Typography
85-
sx={{ mb: 1.5, marginTop: '7px' }}
86-
color="rgba(255, 255, 255, 0.7);
73+
{/* BACK BUTTON
74+
<p
75+
onClick={() => window.history.back()}
76+
style={{
77+
position: 'absolute',
78+
right: '50px',
79+
border: '1px solid rgba(255, 255, 255, 0.7)',
80+
padding: '7px 10px'
81+
}}
82+
>
83+
X
84+
</p> */}
85+
<CardContent>
86+
<Typography
87+
sx={{ fontSize: 14 }}
88+
color="rgba(255, 255, 255, 0.7);
8789
"
88-
>
89-
Welcome to Reactype!
90-
</Typography>
91-
{email ? (
92-
<Typography variant="body2">
93-
Email:
94-
<br />
95-
{email}
96-
</Typography>
97-
) : null}
98-
</CardContent>
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);
100+
"
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>
99112

100-
<Divider />
113+
<Divider />
101114

102-
<CardContent>
103-
<Typography variant="h6" component="div" sx={{ color: 'white' }}>
104-
Apps
105-
</Typography>
106-
<Typography
107-
sx={{ mb: 1.5, marginTop: '8px' }}
108-
color="rgba(255, 255, 255, 0.7);
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);
109122
"
110-
>
111-
Create a web app or a native mobile app to build a custom internal
112-
tool for your business.
113-
</Typography>
114-
</CardContent>
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>
115128

116-
<Divider />
129+
<Divider />
117130

118-
<CardContent>
119-
<Typography variant="h6" component="div" sx={{ color: 'white' }}>
120-
Resources
121-
</Typography>
122-
<Typography
123-
sx={{ mb: 1.5, marginTop: '8px' }}
124-
color="rgba(255, 255, 255, 0.7);
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);
125138
"
126-
>
127-
Securely connect your data and display it inside of Reactype apps.
128-
</Typography>
129-
</CardContent>
130-
<CardActions>
131-
<Button
132-
size="small"
133-
sx={{
134-
color: '#0671E3',
135-
textTransform: 'capitalize',
136-
fontSize: '14px'
137-
}}
138-
href="https://react.dev/learn"
139-
>
140-
React docs
141-
</Button>
142-
</CardActions>
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>
143156

144-
<Divider />
157+
<Divider />
145158

146-
<CardContent>
147-
<Typography variant="h6" component="div" sx={{ color: 'white' }}>
148-
Database
149-
</Typography>
150-
<Typography
151-
sx={{ mb: 1.5, marginTop: '8px' }}
152-
color="rgba(255, 255, 255, 0.7);
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);
153166
"
154-
>
155-
Easily store data in a free SQL database and power your Reactype app.
156-
</Typography>
157-
</CardContent>
158-
<CardActions>
159-
<Button
160-
size="small"
161-
sx={{
162-
color: '#0671E3',
163-
textTransform: 'capitalize',
164-
fontSize: '14px'
165-
}}
166-
href="https://www.mongodb.com/"
167-
>
168-
MongoDB
169-
</Button>
170-
<Button
171-
size="small"
172-
sx={{
173-
color: '#0671E3',
174-
textTransform: 'capitalize',
175-
fontSize: '14px'
176-
}}
177-
href="https://aws.amazon.com/what-is/sql/#:~:text=Structured%20query%20language%20(SQL)%20is,relationships%20between%20the%20data%20values."
178-
>
179-
AWS SQL
180-
</Button>
181-
</CardActions>
182-
<Divider />
183-
</Card>
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>
198+
</div>
199+
</>
184200
);
185201
};
186202

0 commit comments

Comments
 (0)