Nxd 17 - Update Design For Modern Style

nextstep-frontend/package.json

@@ -22,6 +22,7 @@
     "dotenv": "^16.4.7",
     "firebase": "^11.4.0",
     "font-awesome": "^4.7.0",
+    "framer-motion": "^12.15.0",
     "lucide-react": "^0.479.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

nextstep-frontend/src/App.css

@@ -1,23 +1,28 @@
 :root {
-  --color-1: #1877f2;
-  --color-2: #f0f2f5;
-  --color-3: #606770;
-  --color-4: #ccd0d5;
-  --color-5: #165dbb;
-  --color-6: #052652;
-  --color-shadow-1: rgba(0, 0, 0, 0.1);
+  --color-primary: #2D3436;
+  --color-secondary: #0984E3;
+  --color-accent: #00B894;
+  --color-background: #FFFFFF;
+  --color-surface: #F8F9FA;
+  --color-text: #2D3436;
+  --color-text-secondary: #636E72;
+  --color-border: #DFE6E9;
+  --color-shadow: rgba(0, 0, 0, 0.08);
+  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --transition-standard: all 0.3s ease;
+  --border-radius: 12px;
+  --spacing-unit: 8px;
 }
 
 #root {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  height: 100vh;
+  min-height: 100vh;
   width: 100%;
   margin: 0 auto;
-  text-align: center;
-  background-color: #f9f9f9;
+  font-family: var(--font-primary);
+  background-color: var(--color-background);
+  color: var(--color-text);
 }
 
 .logo {
@@ -48,37 +53,114 @@
   }
 }
 
+/* Modern Card Styles */
 .card {
-  padding: 2em;
+  background: var(--color-background);
+  border-radius: var(--border-radius);
+  box-shadow: 0 4px 6px var(--color-shadow);
+  transition: var(--transition-standard);
+  border: 1px solid var(--color-border);
 }
 
-.read-the-docs {
-  color: #888;
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 12px var(--color-shadow);
+}
+
+/* Modern Button Styles */
+.button {
+  background: var(--color-secondary);
+  color: white;
+  border: none;
+  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
+  border-radius: var(--border-radius);
+  font-weight: 500;
+  transition: var(--transition-standard);
+  cursor: pointer;
+}
+
+.button:hover {
+  background: var(--color-accent);
+  transform: translateY(-1px);
+}
+
+/* Modern Input Styles */
+.input {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: calc(var(--spacing-unit) * 1.5);
+  transition: var(--transition-standard);
+  background: var(--color-surface);
+}
+
+.input:focus {
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 2px rgba(9, 132, 227, 0.1);
+  outline: none;
 }
 
+/* Layout Components */
+.layout {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: calc(var(--spacing-unit) * 3);
+}
+
+/* Navigation */
+.nav {
+  background: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
+  padding: calc(var(--spacing-unit) * 2);
+}
+
+/* Job Card Modernization */
 .job-card {
-    padding: 16px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    height: 200px; /* Fixed height for all cards */
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between; /* Align content and button */
-    overflow-y: auto; /* Enable vertical scrolling for overflow */
+  padding: calc(var(--spacing-unit) * 3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  background: var(--color-background);
+  transition: var(--transition-standard);
+  height: auto;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 2);
+}
+
+.job-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 12px var(--color-shadow);
 }
 
 .job-card img {
-    display: inline-block;
-    margin: 0;
-    max-width: 20px;
-    height: 20px;
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
 }
 
 .job-card .company-name {
-    font-weight: bold; /* Make company name bold */
+  font-weight: 600;
+  color: var(--color-text);
+  font-size: 1.1em;
 }
 
 .job-card .location {
-    margin-top: 8px; /* Add separation between company name and location */
-    display: block; /* Ensure it appears on a new line */
+  color: var(--color-text-secondary);
+  font-size: 0.9em;
+  margin-top: calc(var(--spacing-unit));
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .layout {
+    padding: calc(var(--spacing-unit) * 2);
+  }
+
+  .job-card {
+    padding: calc(var(--spacing-unit) * 2);
+  }
+}
+
+.read-the-docs {
+  color: #888;
 }

nextstep-frontend/src/App.tsx

@@ -15,32 +15,73 @@ import LeftBar from './components/LeftBar';
 import Layout from './components/Layout';
 import MainDashboard from './pages/MainDashboard';
 import Quiz from './pages/Quiz';
-import { Box } from '@mui/material';
+import Landing from './pages/Landing';
+import { Box, CssBaseline } from '@mui/material';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { AuthProvider } from './contexts/AuthContext';
 
 const App: React.FC = () => {
   return (
-    <>
-    <Box height="90vh" display='flex' width="100%">
-      <Router>
-        <LeftBar /> 
-        <Routes>
-          <Route path="/" element={<Layout className="login"><Login /></Layout>} />
-          <Route path="/login" element={<Layout className="login"><Login /></Layout>} /> 
-          <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
-          <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
-          <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
-          <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
-          <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
-          <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
-          <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
-          <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
-          <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </Routes>
-      </Router>
-    </Box>
-    <Footer/>
-    </>
+    <AuthProvider>
+      <ThemeProvider>
+        <CssBaseline />
+        <Router>
+          <Box sx={{ 
+            display: 'flex', 
+            flexDirection: 'column', 
+            minHeight: '100vh',
+            bgcolor: 'background.default',
+          }}>
+            <Box sx={{ 
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+            }}>
+              <Routes>
+                {/* Public Routes */}
+                <Route path="/" element={<Landing />} />
+                <Route path="/login" element={<Layout className="login"><Login /></Layout>} />
+                <Route path="/register" element={<Layout className="register"><Register /></Layout>} />
+
+                {/* Protected Routes */}
+                <Route
+                  path="/*"
+                  element={
+                    <Box sx={{ display: 'flex', flex: 1 }}>
+                      <LeftBar />
+                      <Box
+                        component="main"
+                        sx={{
+                          flexGrow: 1,
+                          p: 3,
+                          width: '100%',
+                          maxWidth: '1200px',
+                          mx: 'auto',
+                          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                        }}
+                      >
+                        <Routes>
+                          <Route path="/feed" element={<RequireAuth><Layout className="feed"><Feed /></Layout></RequireAuth>} />
+                          <Route path="/profile" element={<RequireAuth><Layout className="profile"><Profile /></Layout></RequireAuth>} />
+                          <Route path="/new-post" element={<RequireAuth><Layout className="new-post"><NewPost /></Layout></RequireAuth>} />
+                          <Route path="/post/:postId" element={<RequireAuth><Layout className="post-details"><PostDetails /></Layout></RequireAuth>} />
+                          <Route path="/chat" element={<RequireAuth><Layout className="chat"><Chat /></Layout></RequireAuth>} />
+                          <Route path="/resume" element={<RequireAuth><Layout className="resume"><Resume /></Layout></RequireAuth>} />
+                          <Route path="/main-dashboard" element={<RequireAuth><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
+                          <Route path="/quiz" element={<RequireAuth><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
+                          <Route path="*" element={<Navigate to="/" />} />
+                        </Routes>
+                      </Box>
+                    </Box>
+                  }
+                />
+              </Routes>
+            </Box>
+            <Footer />
+          </Box>
+        </Router>
+      </ThemeProvider>
+    </AuthProvider>
   );
 };