Skip to content

Commit 84f05f9

Browse files
taljacob2taljacob2
authored
Merge pull request #15 from NextStepFinalProject/NXD-17-fixes
added small fixes
2 parents 18f3a36 + 303c46b commit 84f05f9

34 files changed

Lines changed: 3197 additions & 676 deletions

‎nextstep-frontend/assets/NextStep.png‎

1.41 MB
Loading

‎nextstep-frontend/assets/NextStepLogo.png‎

36.7 KB
Loading

‎nextstep-frontend/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/png" href="/NextStepLogo.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Next Step</title>
88
</head>

‎nextstep-frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"dotenv": "^16.4.7",
2323
"firebase": "^11.4.0",
2424
"font-awesome": "^4.7.0",
25+
"framer-motion": "^12.15.0",
2526
"lucide-react": "^0.479.0",
2627
"react": "^18.3.1",
2728
"react-dom": "^18.3.1",

‎nextstep-frontend/public/NextStepLogo.png‎

36.7 KB
Loading

‎nextstep-frontend/public/assets/landing-hero.svg‎

Lines changed: 50 additions & 0 deletions
Loading

‎nextstep-frontend/public/index.html‎

Whitespace-only changes.

‎nextstep-frontend/src/App.css‎

Lines changed: 112 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
:root {
2-
--color-1: #1877f2;
3-
--color-2: #f0f2f5;
4-
--color-3: #606770;
5-
--color-4: #ccd0d5;
6-
--color-5: #165dbb;
7-
--color-6: #052652;
8-
--color-shadow-1: rgba(0, 0, 0, 0.1);
2+
--color-primary: #2D3436;
3+
--color-secondary: #0984E3;
4+
--color-accent: #00B894;
5+
--color-background: #FFFFFF;
6+
--color-surface: #F8F9FA;
7+
--color-text: #2D3436;
8+
--color-text-secondary: #636E72;
9+
--color-border: #DFE6E9;
10+
--color-shadow: rgba(0, 0, 0, 0.08);
11+
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
12+
--transition-standard: all 0.3s ease;
13+
--border-radius: 12px;
14+
--spacing-unit: 8px;
915
}
1016

1117
#root {
1218
display: flex;
1319
flex-direction: column;
14-
justify-content: space-between;
15-
align-items: center;
16-
height: 100vh;
20+
min-height: 100vh;
1721
width: 100%;
1822
margin: 0 auto;
19-
text-align: center;
23+
font-family: var(--font-primary);
24+
background-color: var(--color-background);
25+
color: var(--color-text);
2026
}
2127

2228
.logo {
@@ -47,37 +53,114 @@
4753
}
4854
}
4955

56+
/* Modern Card Styles */
5057
.card {
51-
padding: 2em;
58+
background: var(--color-background);
59+
border-radius: var(--border-radius);
60+
box-shadow: 0 4px 6px var(--color-shadow);
61+
transition: var(--transition-standard);
62+
border: 1px solid var(--color-border);
5263
}
5364

54-
.read-the-docs {
55-
color: #888;
65+
.card:hover {
66+
transform: translateY(-2px);
67+
box-shadow: 0 8px 12px var(--color-shadow);
68+
}
69+
70+
/* Modern Button Styles */
71+
.button {
72+
background: var(--color-secondary);
73+
color: white;
74+
border: none;
75+
padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
76+
border-radius: var(--border-radius);
77+
font-weight: 500;
78+
transition: var(--transition-standard);
79+
cursor: pointer;
80+
}
81+
82+
.button:hover {
83+
background: var(--color-accent);
84+
transform: translateY(-1px);
85+
}
86+
87+
/* Modern Input Styles */
88+
.input {
89+
border: 1px solid var(--color-border);
90+
border-radius: var(--border-radius);
91+
padding: calc(var(--spacing-unit) * 1.5);
92+
transition: var(--transition-standard);
93+
background: var(--color-surface);
94+
}
95+
96+
.input:focus {
97+
border-color: var(--color-secondary);
98+
box-shadow: 0 0 0 2px rgba(9, 132, 227, 0.1);
99+
outline: none;
56100
}
57101

102+
/* Layout Components */
103+
.layout {
104+
max-width: 1200px;
105+
margin: 0 auto;
106+
padding: calc(var(--spacing-unit) * 3);
107+
}
108+
109+
/* Navigation */
110+
.nav {
111+
background: var(--color-background);
112+
border-bottom: 1px solid var(--color-border);
113+
padding: calc(var(--spacing-unit) * 2);
114+
}
115+
116+
/* Job Card Modernization */
58117
.job-card {
59-
padding: 16px;
60-
border: 1px solid #ddd;
61-
border-radius: 8px;
62-
height: 200px; /* Fixed height for all cards */
63-
display: flex;
64-
flex-direction: column;
65-
justify-content: space-between; /* Align content and button */
66-
overflow-y: auto; /* Enable vertical scrolling for overflow */
118+
padding: calc(var(--spacing-unit) * 3);
119+
border: 1px solid var(--color-border);
120+
border-radius: var(--border-radius);
121+
background: var(--color-background);
122+
transition: var(--transition-standard);
123+
height: auto;
124+
min-height: 200px;
125+
display: flex;
126+
flex-direction: column;
127+
gap: calc(var(--spacing-unit) * 2);
128+
}
129+
130+
.job-card:hover {
131+
transform: translateY(-2px);
132+
box-shadow: 0 8px 12px var(--color-shadow);
67133
}
68134

69135
.job-card img {
70-
display: inline-block;
71-
margin: 0;
72-
max-width: 20px;
73-
height: 20px;
136+
width: 24px;
137+
height: 24px;
138+
object-fit: contain;
74139
}
75140

76141
.job-card .company-name {
77-
font-weight: bold; /* Make company name bold */
142+
font-weight: 600;
143+
color: var(--color-text);
144+
font-size: 1.1em;
78145
}
79146

80147
.job-card .location {
81-
margin-top: 8px; /* Add separation between company name and location */
82-
display: block; /* Ensure it appears on a new line */
148+
color: var(--color-text-secondary);
149+
font-size: 0.9em;
150+
margin-top: calc(var(--spacing-unit));
151+
}
152+
153+
/* Responsive Design */
154+
@media (max-width: 768px) {
155+
.layout {
156+
padding: calc(var(--spacing-unit) * 2);
157+
}
158+
159+
.job-card {
160+
padding: calc(var(--spacing-unit) * 2);
161+
}
162+
}
163+
164+
.read-the-docs {
165+
color: #888;
83166
}

‎nextstep-frontend/src/App.tsx‎

Lines changed: 77 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,96 @@ import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-d
33
import Login from './pages/Login';
44
import Register from './pages/Register';
55
import Profile from './pages/Profile';
6-
import './App.css'
6+
import './App.css';
77
import Feed from './pages/Feed';
88
import Footer from './components/Footer';
99
import RequireAuth from './hoc/RequireAuth';
1010
import NewPost from './pages/NewPost';
1111
import PostDetails from './pages/PostDetails';
1212
import Chat from './pages/Chat';
1313
import Resume from './pages/Resume';
14-
import TopBar from './components/TopBar';
14+
import LeftBar from './components/LeftBar';
1515
import Layout from './components/Layout';
1616
import MainDashboard from './pages/MainDashboard';
1717
import Quiz from './pages/Quiz';
18+
import Landing from './pages/Landing';
19+
import { Box, CssBaseline } from '@mui/material';
20+
import { ThemeProvider } from './contexts/ThemeContext';
21+
import { AuthProvider } from './contexts/AuthContext';
1822

1923
const App: React.FC = () => {
2024
return (
21-
<>
22-
<Router>
23-
<Routes>
24-
<Route path="/" element={<Layout className="login"><Login /></Layout>} />
25-
<Route path="/login" element={<Layout className="login"><Login /></Layout>} />
26-
<Route path="/register" element={<Layout className="register"><Register /></Layout>} />
27-
<Route path="/feed" element={<RequireAuth><TopBar /><Layout className="feed"><Feed /></Layout></RequireAuth>} />
28-
<Route path="/profile" element={<RequireAuth><TopBar /><Layout className="profile"><Profile /></Layout></RequireAuth>} />
29-
<Route path="/new-post" element={<RequireAuth><TopBar /><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
30-
<Route path="/post/:postId" element={<RequireAuth><TopBar /><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
31-
<Route path="/chat" element={<RequireAuth><TopBar /><Layout className="chat"><Chat /></Layout></RequireAuth>} />
32-
<Route path="/resume" element={<RequireAuth><TopBar /><Layout className="resume"><Resume /></Layout></RequireAuth>} />
33-
<Route path="/main-dashboard" element={<RequireAuth><TopBar /><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
34-
<Route path="/quiz" element={<RequireAuth><TopBar /><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
35-
<Route path="*" element={<Navigate to="/" />} />
36-
</Routes>
37-
</Router>
38-
<Footer/>
39-
</>
25+
<AuthProvider>
26+
<ThemeProvider>
27+
<CssBaseline />
28+
<Router>
29+
<Box sx={{
30+
display: 'flex',
31+
flexDirection: 'column',
32+
minHeight: '100vh',
33+
bgcolor: 'background.default',
34+
}}>
35+
<Box sx={{
36+
flex: 1,
37+
display: 'flex',
38+
flexDirection: 'column',
39+
}}>
40+
<Routes>
41+
{/* Public Routes */}
42+
<Route path="/" element={<Landing />} />
43+
<Route path="/login" element={<Layout className="login"><Login /></Layout>} />
44+
<Route path="/register" element={<Layout className="register"><Register /></Layout>} />
45+
46+
{/* Protected Routes */}
47+
<Route
48+
path="/*"
49+
element={
50+
<Box sx={{ position: 'relative', flex: 1 }}>
51+
<Box
52+
sx={{
53+
position: 'absolute',
54+
top: 0,
55+
left: 0,
56+
zIndex: 10,
57+
backgroundColor: 'background.paper',
58+
boxShadow: 3,
59+
}}
60+
>
61+
<LeftBar />
62+
</Box>
63+
<Box
64+
component="main"
65+
sx={{
66+
flexGrow: 1,
67+
p: 3,
68+
width: '100%',
69+
maxWidth: '1200px',
70+
mx: 'auto',
71+
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
72+
}}
73+
>
74+
<Routes>
75+
<Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
76+
<Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
77+
<Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
78+
<Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
79+
<Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
80+
<Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
81+
<Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
82+
<Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
83+
<Route path="*" element={<Navigate to="/" />} />
84+
</Routes>
85+
</Box>
86+
</Box>
87+
}
88+
/>
89+
</Routes>
90+
</Box>
91+
<Footer />
92+
</Box>
93+
</Router>
94+
</ThemeProvider>
95+
</AuthProvider>
4096
);
4197
};
4298

0 commit comments

Comments
 (0)