From db8311e419e3e2e78aa7a2dfbf091a1226e78786 Mon Sep 17 00:00:00 2001 From: Sahil Kashyap <32007662+sahilkashyap64@users.noreply.github.com> Date: Fri, 10 Oct 2025 01:48:52 +0530 Subject: [PATCH 1/2] Revamp driver portal UI --- index.html | 2 +- src/App.tsx | 2 +- src/components/Header.tsx | 37 +-- src/main.tsx | 2 +- src/routes/Orders/Index.tsx | 126 ++++---- src/routes/Profile.tsx | 55 +++- src/styles/globals.css | 575 +++++++++++++++++++++++++----------- 7 files changed, 541 insertions(+), 258 deletions(-) diff --git a/index.html b/index.html index 7649bb4..14851f4 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/src/App.tsx b/src/App.tsx index ca5860b..8b2bdf3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import { Navigate, Outlet, Route, Routes } from 'react-router-dom' import LoginRoute from './routes/Login' import OrdersRoute from './routes/Orders/Index' import ProfileRoute from './routes/Profile' -import { ProtectedRoute } from './components/ProtectedRoute' +import { ProtectedRoute } from './components/ProtectedRoute.tsx' import { Header } from './components/Header' import { BottomNav } from './components/BottomNav' import { useAuth } from './hooks/useAuth' diff --git a/src/components/Header.tsx b/src/components/Header.tsx index e8fdd75..8740cfb 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -20,29 +20,32 @@ export function Header({ trackingActive }: HeaderProps): JSX.Element {

- Jason's Delivery + Jason's Delivery + Driver Portal

-
- -
- {driver?.name ?? 'Driver'} - {driver ? statusLabels[driver.status] : 'Offline'} +
+
+ +
+ {driver?.name ?? 'Driver'} + {driver ? statusLabels[driver.status] : 'Offline'} +
-
- 📡 -
+ {trackingActive ? 'Live' : 'Paused'} +
) diff --git a/src/main.tsx b/src/main.tsx index ac2a5f1..9fa5ebf 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,6 @@ import ReactDOM from 'react-dom/client' import { BrowserRouter } from 'react-router-dom' -import App from './App' +import App from './App.tsx' import './styles/globals.css' import { AuthProvider } from './hooks/useAuth' import { ToastProvider } from './hooks/useToast' diff --git a/src/routes/Orders/Index.tsx b/src/routes/Orders/Index.tsx index e4684ed..7ff70b7 100644 --- a/src/routes/Orders/Index.tsx +++ b/src/routes/Orders/Index.tsx @@ -95,72 +95,84 @@ export default function OrdersRoute(): JSX.Element { return (
- ({ ...tab, badge: tab.id === 'pending' ? segmented.pending.length : undefined }))} - activeId={activeTab} - onChange={(id) => setActiveTab(id as TabId)} - /> - {activeTab === 'pending' ? ( -
-
+
+
+

Orders

+

Today's queue

+

Monitor new requests and keep deliveries moving.

+
+ ({ + ...tab, + badge: tab.id === 'pending' ? segmented.pending.length : undefined, + }))} + activeId={activeTab} + onChange={(id) => setActiveTab(id as TabId)} + /> +
+
+ {activeTab === 'pending' ? ( +
+
+ {listForTab.length === 0 ? ( +

No orders in this state.

+ ) : ( + listForTab.map((order) => ( + + )) + )} +
+
+ ) : activeTab === 'active' ? ( +
{listForTab.length === 0 ? (

No orders in this state.

) : ( listForTab.map((order) => ( - + )) )}
-
- ) : activeTab === 'active' ? ( -
- {listForTab.length === 0 ? ( -

No orders in this state.

- ) : ( - listForTab.map((order) => ( - - )) - )} -
- ) : ( -
- {segmented.completed.length === 0 ? ( -

No orders in this state.

- ) : ( - <> -
- {visibleCompletedOrders.map((order) => ( - - setExpandedCompletedId((current) => - current === next.id ? undefined : next.id, + ) : ( +
+ {segmented.completed.length === 0 ? ( +

No orders in this state.

+ ) : ( + <> +
+ {visibleCompletedOrders.map((order) => ( + + setExpandedCompletedId((current) => + current === next.id ? undefined : next.id, + ) + } + onArrive={handleArrive} + onComplete={handleComplete} + /> + ))} +
+ {canShowMoreCompleted ? ( +
- {canShowMoreCompleted ? ( - - ) : null} - - )} -
- )} + > + See more + + ) : null} + + )} +
+ )} +
) } diff --git a/src/routes/Profile.tsx b/src/routes/Profile.tsx index 3b80c06..76d8495 100644 --- a/src/routes/Profile.tsx +++ b/src/routes/Profile.tsx @@ -13,6 +13,15 @@ export default function ProfileRoute(): JSX.Element { const { driver, logout, setStatus } = useAuth() const { push } = useToast() const [updating, setUpdating] = useState(false) + const initials = (driver?.name ?? 'Driver') + .split(' ') + .map((part) => part.charAt(0)) + .filter(Boolean) + .slice(0, 2) + .join('') + .toUpperCase() + const isOffline = driver?.status === 'OFFLINE' + const isDriving = driver?.status === 'ONLINE' || driver?.status === 'ON_DELIVERY' async function handleStatusChange(nextStatus: DriverStatus) { if (!driver || driver.status === nextStatus) return @@ -27,18 +36,37 @@ export default function ProfileRoute(): JSX.Element { return (
-
-

Driver Profile

-

{driver?.name}

-

{driver?.email}

-

{driver?.phone}

+
+
+
{initials}
+
+

Driver Profile

+

{driver?.name ?? 'Driver'}

+

Jason's Delivery partner

+
+
+
+
+ Email + {driver?.email ?? 'Not provided'} +
+
+ Phone + {driver?.phone ?? 'Not provided'} +
+
-
-

Status

-
+
+
+

Status

+ + {trackingActive ? 'Live location on' : 'Location paused'} + +
+
-

Location tracking: {trackingActive ? 'Active' : 'Paused'}

+

Switch to Drive when you're ready to accept new orders.

-
+

Session

+

Signed in as {driver?.email ?? 'your account'}

diff --git a/src/styles/globals.css b/src/styles/globals.css index a93c382..d83dd57 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,7 +1,7 @@ :root { color-scheme: light; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + background: radial-gradient(circle at top, #8f67ff 0%, #5b52ff 35%, #3e1e68 100%); min-height: 100%; } @@ -13,66 +13,117 @@ body { margin: 0; min-height: 100vh; color: #1f2937; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: radial-gradient(circle at top, #8f67ff 0%, #5b52ff 35%, #3e1e68 100%); + display: flex; + justify-content: center; + align-items: flex-start; + padding: 32px 16px; } a { color: inherit; + text-decoration: none; } -button { +button, +input, +select, +textarea { font: inherit; } +#root { + width: 100%; +} + .app-container { - max-width: 430px; + width: min(100%, 420px); + min-height: calc(100vh - 64px); margin: 0 auto; - min-height: 100vh; - background: #f8f9fa; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.78) 100%); + border: 1px solid rgba(255, 255, 255, 0.45); + border-radius: 32px; + box-shadow: 0 35px 70px rgba(31, 41, 55, 0.35); + backdrop-filter: blur(18px); display: flex; flex-direction: column; + overflow: hidden; position: relative; - box-shadow: 0 0 40px rgba(0, 0, 0, 0.15); } .app-main { flex: 1; overflow-y: auto; - padding-bottom: 80px; + padding: 28px 24px 120px; } .app-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: linear-gradient(130deg, rgba(110, 74, 255, 0.95) 0%, rgba(173, 72, 227, 0.92) 100%); color: white; - padding: 20px; + padding: 28px 32px 24px; display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); - position: sticky; - top: 0; - z-index: 20; + gap: 20px; + border-bottom-left-radius: 28px; + border-bottom-right-radius: 28px; + box-shadow: 0 25px 45px rgba(84, 63, 206, 0.45); } .app-title { margin: 0; - font-size: 20px; + font-size: 18px; font-weight: 600; } .app-title-link { + display: flex; + flex-direction: column; + gap: 6px; color: inherit; - text-decoration: none; +} + +.app-title-badge { + font-size: 12px; + letter-spacing: 0.32em; + text-transform: uppercase; + opacity: 0.8; +} + +.app-title-subtitle { + font-size: 24px; + font-weight: 700; } .driver-pill { display: flex; align-items: center; - gap: 10px; + gap: 16px; font-size: 14px; - background: rgba(255, 255, 255, 0.2); - padding: 8px 12px; - border-radius: 999px; + background: rgba(255, 255, 255, 0.15); + padding: 12px 18px; + border-radius: 18px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); + backdrop-filter: blur(14px); + color: #fff; +} + +.driver-pill-status-group { + display: flex; + align-items: center; + gap: 12px; +} + +.driver-pill-text { + display: flex; + flex-direction: column; + gap: 4px; + line-height: 1.1; +} + +.driver-pill-label { + font-size: 12px; + font-weight: 600; } .status-dot { @@ -115,46 +166,43 @@ button { } } -.driver-pill-text { - display: flex; - flex-direction: column; - line-height: 1.1; -} - -.driver-pill-name { - font-weight: 600; - font-size: 13px; -} - .driver-pill-status { - font-size: 11px; - opacity: 0.9; + font-size: 14px; + font-weight: 600; + letter-spacing: 0.02em; } .tracking-indicator { - width: 28px; - height: 28px; - border-radius: 50%; - display: grid; - place-items: center; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 6px 14px; + border-radius: 999px; + font-size: 11px; + letter-spacing: 0.14em; + text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.4); - background: rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.18); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .tracking-indicator.active { - background: rgba(16, 185, 129, 0.2); + background: rgba(16, 185, 129, 0.3); + border-color: rgba(110, 231, 183, 0.8); } .bottom-nav { position: sticky; - bottom: 0; - left: 0; - right: 0; + bottom: 24px; + margin: 0 24px; + margin-top: auto; display: flex; - justify-content: space-around; - background: white; - border-top: 1px solid #e5e7eb; - padding: 10px 0; + gap: 12px; + background: rgba(255, 255, 255, 0.88); + border-radius: 22px; + padding: 12px 18px; + box-shadow: 0 20px 35px rgba(79, 70, 229, 0.22); + border: 1px solid rgba(148, 163, 184, 0.15); } .nav-item { @@ -162,10 +210,13 @@ button { display: flex; flex-direction: column; align-items: center; - gap: 4px; + gap: 6px; color: #6b7280; - text-decoration: none; font-size: 12px; + font-weight: 600; + padding: 10px 12px; + border-radius: 16px; + transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .nav-item span:first-child { @@ -173,48 +224,74 @@ button { } .nav-item.active { - color: #667eea; - font-weight: 600; + color: white; + background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); + box-shadow: 0 16px 30px rgba(99, 102, 241, 0.3); + transform: translateY(-4px); } .login-container { - min-height: 100vh; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + width: min(100%, 420px); + margin: 0 auto; + padding: 32px 0; display: flex; + flex-direction: column; align-items: center; justify-content: center; - padding: 20px; + gap: 32px; } .login-content { width: 100%; - max-width: 420px; + display: flex; + flex-direction: column; + gap: 32px; } .login-logo { text-align: center; - margin-bottom: 40px; - color: white; + color: #f8fafc; + display: flex; + flex-direction: column; + gap: 8px; +} + +.login-logo h1 { + margin: 0; + font-size: 28px; + font-weight: 700; +} + +.login-logo p { + margin: 0; + font-size: 14px; + letter-spacing: 0.28em; + text-transform: uppercase; } .logo-icon { - width: 100px; - height: 100px; - border-radius: 25px; - background: rgba(255, 255, 255, 0.15); + width: 96px; + height: 96px; + border-radius: 24px; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%); display: grid; place-items: center; - font-size: 48px; - margin: 0 auto 20px; - backdrop-filter: blur(10px); - box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2); + font-size: 46px; + margin: 0 auto 16px; + backdrop-filter: blur(22px); + box-shadow: 0 30px 50px rgba(15, 23, 42, 0.35); + border: 1px solid rgba(255, 255, 255, 0.35); } .login-form { - background: white; - border-radius: 20px; - padding: 30px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); + background: rgba(255, 255, 255, 0.94); + border-radius: 28px; + padding: 36px 32px; + box-shadow: 0 30px 70px rgba(15, 23, 42, 0.3); + backdrop-filter: blur(18px); + display: flex; + flex-direction: column; + gap: 18px; } .form-group { @@ -224,42 +301,42 @@ button { } .form-group label { - font-size: 12px; - font-weight: 600; - letter-spacing: 0.5px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.32em; text-transform: uppercase; - color: #4b5563; - margin-bottom: 8px; + color: #64748b; + margin-bottom: 10px; } .form-group input { - border: 2px solid #e5e7eb; - border-radius: 10px; - padding: 14px 16px; + border: 1px solid rgba(148, 163, 184, 0.4); + border-radius: 14px; + padding: 14px 18px; font-size: 16px; - background: #f9fafb; + background: rgba(248, 250, 252, 0.9); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-group input:focus { outline: none; - border-color: #667eea; - background: white; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); + border-color: rgba(99, 102, 241, 0.8); + background: #ffffff; + box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); } .login-btn { width: 100%; padding: 16px; - border-radius: 10px; + border-radius: 16px; border: none; cursor: pointer; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); color: white; - font-weight: 600; - letter-spacing: 0.6px; + font-weight: 700; + letter-spacing: 0.32em; text-transform: uppercase; - transition: transform 0.2s ease; + transition: transform 0.2s ease, box-shadow 0.2s ease; } .login-btn:disabled { @@ -267,103 +344,154 @@ button { cursor: wait; } +.login-btn:not(:disabled):hover { + box-shadow: 0 14px 30px rgba(99, 102, 241, 0.35); +} + .login-btn:not(:disabled):active { - transform: scale(0.98); + transform: translateY(1px); } .login-footer { text-align: center; - margin-top: 25px; - padding-top: 25px; - border-top: 1px solid #e5e7eb; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid rgba(148, 163, 184, 0.2); + display: flex; + flex-direction: column; + gap: 12px; } .demo-note { - color: #667eea; + color: #6366f1; font-size: 12px; - margin-bottom: 10px; + letter-spacing: 0.08em; + text-transform: uppercase; } .demo-button { background: transparent; - border: 1px solid #667eea; - color: #667eea; - padding: 8px 16px; - border-radius: 8px; + border: 1px solid rgba(99, 102, 241, 0.4); + color: #4c1d95; + padding: 10px 18px; + border-radius: 999px; cursor: pointer; font-size: 12px; + font-weight: 600; + transition: background 0.2s ease, color 0.2s ease; +} + +.demo-button:hover { + background: rgba(99, 102, 241, 0.1); } .tabs { display: flex; - background: white; - border-bottom: 1px solid #e5e7eb; - position: sticky; - top: 0; - z-index: 10; + gap: 8px; + width: 100%; + padding: 6px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.32); + border: 1px solid rgba(255, 255, 255, 0.35); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .tab { flex: 1; - padding: 15px; - text-align: center; - font-weight: 500; - color: #6b7280; - cursor: pointer; - background: transparent; + padding: 12px; + border-radius: 999px; border: none; - position: relative; + background: transparent; + color: rgba(76, 29, 149, 0.7); + font-weight: 600; font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + cursor: pointer; + transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .tab.active { - color: #667eea; + background: #ffffff; + color: #5b21b6; + box-shadow: 0 16px 35px rgba(129, 140, 248, 0.35); } .tab.active::after { - content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - height: 3px; - background: #667eea; + display: none; } .tab-badge { - background: #ef4444; + background: linear-gradient(135deg, #ef4444 0%, #f97316 100%); color: white; font-size: 11px; - padding: 2px 6px; + padding: 2px 8px; border-radius: 999px; - margin-left: 6px; } .orders-page { display: flex; flex-direction: column; - min-height: 100%; + gap: 24px; } -.orders-content { + +.orders-hero-card { display: flex; flex-direction: column; gap: 20px; - padding: 20px; + padding: 28px 24px; + background: linear-gradient(135deg, rgba(236, 233, 254, 0.95) 0%, rgba(244, 241, 255, 0.9) 100%); + border-radius: 28px; + box-shadow: 0 24px 55px rgba(99, 102, 241, 0.25); + border: 1px solid rgba(196, 181, 253, 0.4); +} + +.orders-hero-text { + display: flex; + flex-direction: column; + gap: 6px; + color: #4c1d95; +} + +.orders-overline { + margin: 0; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.34em; + color: rgba(76, 29, 149, 0.6); +} + +.orders-hero-text h2 { + margin: 0; + font-size: 24px; + font-weight: 700; +} + +.orders-hero-subtitle { + margin: 0; + font-size: 14px; + color: rgba(76, 29, 149, 0.7); +} + +.orders-body { + display: flex; + flex-direction: column; + gap: 24px; } .pending-orders { display: flex; flex-direction: column; gap: 20px; - padding: 20px; } .active-orders { display: flex; flex-direction: column; gap: 20px; - padding: 20px; } .orders-list { @@ -375,8 +503,7 @@ button { .completed-orders { display: flex; flex-direction: column; - gap: 16px; - padding: 20px; + gap: 20px; } .completed-orders-list { @@ -943,61 +1070,168 @@ button { } .profile-page { - padding: 20px; display: flex; flex-direction: column; - gap: 20px; + gap: 24px; } .profile-card { - background: white; - border-radius: 16px; - padding: 20px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.92); + border-radius: 28px; + padding: 28px; + box-shadow: 0 24px 55px rgba(15, 23, 42, 0.18); + border: 1px solid rgba(148, 163, 184, 0.25); } .profile-card h2, .profile-card h3 { - margin-top: 0; + margin: 0; } -.profile-name { +.profile-summary { + display: flex; + flex-direction: column; + gap: 24px; +} + +.profile-hero { + display: flex; + gap: 18px; + align-items: center; +} + +.profile-avatar { + width: 64px; + height: 64px; + border-radius: 20px; + background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); + display: grid; + place-items: center; + font-weight: 700; font-size: 20px; + color: white; + box-shadow: 0 20px 35px rgba(99, 102, 241, 0.4); +} + +.profile-overline { + margin: 0; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.28em; + color: #a855f7; +} + +.profile-heading { + margin: 0; + font-size: 24px; font-weight: 700; + color: #111827; } -.profile-email, -.profile-phone { +.profile-subheading { + margin: 0; + font-size: 14px; color: #6b7280; - margin: 4px 0; } -.status-buttons { +.profile-contact { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 16px; +} + +.contact-label { + display: block; + font-size: 11px; + letter-spacing: 0.28em; + text-transform: uppercase; + color: #94a3b8; + margin-bottom: 6px; +} + +.contact-value { + font-size: 15px; + font-weight: 600; + color: #1e293b; +} + +.profile-card-header { display: flex; - gap: 10px; - flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-bottom: 16px; +} + +.tracking-chip { + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: 999px; + padding: 6px 14px; + font-size: 11px; + letter-spacing: 0.16em; + text-transform: uppercase; + border: 1px solid rgba(59, 130, 246, 0.2); + color: #1d4ed8; + background: rgba(191, 219, 254, 0.35); +} + +.tracking-chip.live { + border-color: rgba(16, 185, 129, 0.35); + background: rgba(16, 185, 129, 0.18); + color: #047857; +} + +.tracking-chip.paused { + border-color: rgba(59, 130, 246, 0.25); +} + +.status-toggle { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; } .status-button { - flex: 1; - min-width: 100px; - border-radius: 10px; - border: 1px solid #d1d5db; - padding: 12px; + border-radius: 16px; + border: 1px solid rgba(148, 163, 184, 0.4); + padding: 16px 12px; + background: rgba(248, 250, 252, 0.7); + font-weight: 600; + color: #475569; cursor: pointer; - background: #f9fafb; + transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .status-button.active { - background: rgba(102, 126, 234, 0.12); - border-color: #667eea; - color: #4c1d95; + background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); + border-color: transparent; + color: white; + box-shadow: 0 18px 36px rgba(99, 102, 241, 0.35); } -.tracking-note { - margin-top: 12px; +.status-button:disabled { + opacity: 0.7; + cursor: wait; +} + +.status-helper { + margin: 12px 0 0; font-size: 13px; - color: #6b7280; + color: #64748b; +} + +.profile-session { + display: flex; + flex-direction: column; + gap: 16px; +} + +.session-note { + margin: 0; + font-size: 14px; + color: #64748b; } .toast-container { @@ -1066,31 +1300,36 @@ button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } -@media (min-width: 768px) { +@media (max-width: 480px) { body { - display: flex; - justify-content: center; + padding: 20px 12px; } .app-container { - max-width: 100%; - width: 420px; + border-radius: 26px; + min-height: calc(100vh - 40px); } - .toast-container { - right: calc(50% - 210px - 20px); + .app-header { + padding: 24px 24px 20px; } - .orders-content { - flex-direction: row; - align-items: flex-start; + .bottom-nav { + margin: 0 16px; + bottom: 16px; } +} - .orders-list { - flex: 1; +@media (min-width: 768px) { + body { + padding: 48px 24px; } - .order-detail { - flex: 1; + .app-container { + width: 420px; + } + + .toast-container { + right: calc(50% - 210px - 20px); } } From 56c62856b5fb48f00ab26ccbac295cfd98b8cf30 Mon Sep 17 00:00:00 2001 From: Sahil Kashyap <32007662+sahilkashyap64@users.noreply.github.com> Date: Fri, 10 Oct 2025 01:54:27 +0530 Subject: [PATCH 2/2] Route app through JSX entry --- index.html | 2 +- src/main.jsx | 24 ++++++++++++++++-------- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 14851f4..7649bb4 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/src/main.jsx b/src/main.jsx index 84a9259..d9f31a5 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,16 +1,24 @@ import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' +import ReactDOM from 'react-dom/client' import { BrowserRouter } from 'react-router-dom' -import './index.css' -import App from './App.jsx' -import { AuthProvider } from './context/AuthContext.jsx' +import App from './App.tsx' +import './styles/globals.css' +import { AuthProvider } from './hooks/useAuth' +import { ToastProvider } from './hooks/useToast' +import { SocketProvider } from './hooks/useSocket' +import { ToastContainer } from './components/ToastContainer' -createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById('root')).render( - - - + + + + + + + + , )