updates on the design

Dockerfile

@@ -0,0 +1,33 @@
+# Stage 1: Build the React application
+FROM node:20-alpine AS build
+WORKDIR /app
+
+# Copy package management files first for better caching
+COPY package.json yarn.lock* package-lock.json* ./
+
+# Install dependencies (using npm to respect package-lock.json if it exists, with legacy-peer-deps for compatibility)
+RUN npm install --legacy-peer-deps
+
+# Copy the source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:alpine
+
+WORKDIR /usr/share/nginx/html
+
+# Remove default Nginx welcome page
+RUN rm -rf ./*
+
+# Copy built assets from the previous stage
+COPY --from=build /app/build/ .
+
+# Copy the custom Nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,18 @@
+events {}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    server {
+        listen 80;
+        server_name localhost;
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html index.htm;
+            # This line forces Nginx to pass routing back to React Router
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

src/layout/MainLayout/AppTopNav.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
@@ -18,11 +17,18 @@ import { Divider } from '@astryxdesign/core/Divider';
 
 import { TbBoxMultiple1 } from 'react-icons/tb';
 import { GrMultiple } from 'react-icons/gr';
-import { BellOutlined, WindowsOutlined, EditOutlined, CommentOutlined, LogoutOutlined, GiftOutlined, MessageOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  BellOutlined,
+  WindowsOutlined,
+  EditOutlined,
+  LogoutOutlined,
+  GiftOutlined,
+  MessageOutlined,
+  SettingOutlined
+} from '@ant-design/icons';
 
 import avatar1 from 'assets/images/users/avatar-1.png';
 import logo from 'assets/images/doormile-logo.png';
-import navbarMark from 'assets/images/doormile-mark.png';
 import { clearFcmToken } from 'store/reducers/fcmSlice';
 import { logoutUser } from 'store/reducers/loginUserSlice';
 import { performSessionLogout } from 'utils/session';
@@ -36,30 +42,6 @@ const logoStyle = {
   filter: 'brightness(0) saturate(100%) invert(15%) sepia(93%) saturate(5437%) hue-rotate(346deg) brightness(81%) contrast(92%)'
 };
 
-// Collapsed rail: doormile-mark.png (red-on-white disc) needs a white
-// backing + scale(1.4) crop to fill its circle cleanly — same composition
-// the old DrawerHeader used, just sized for the nav-bar row instead of the
-// full-height sidebar rail.
-const markWrapperStyle = {
-  width: 32,
-  height: 32,
-  borderRadius: '50%',
-  background: '#fff',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  flexShrink: 0
-};
-
-const markStyle = {
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  transform: 'scale(1.4)',
-  display: 'block'
-};
-
 const NotificationPanel = () => (
   <VStack gap={0} padding={0} width={320}>
     <HStack justify="between" vAlign="center" padding={2}>
@@ -92,7 +74,7 @@ const NotificationPanel = () => (
 
 // ==============================|| MAIN LAYOUT - TOP NAV ||============================== //
 
-const AppTopNav = ({ isSidebarCollapsed }) => {
+const AppTopNav = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
@@ -136,23 +118,7 @@ const AppTopNav = ({ isSidebarCollapsed }) => {
           borderBottom: `1px solid ${DT.borderSubtle}`,
           boxShadow: DT.shadowMd
         }}
-        heading={
+        heading={<TopNavHeading logo={<img src={logo} alt="Doormile Express" style={logoStyle} />} headingHref="/doormile/dispatch" />}
-          <TopNavHeading
-            logo={
-              isSidebarCollapsed ? (
-                <HStack gap={1} vAlign="center" padding={0}>
-                  <span style={markWrapperStyle}>
-                    <img src={navbarMark} alt="" style={markStyle} />
-                  </span>
-                  <img src={logo} alt="Doormile Express" style={logoStyle} />
-                </HStack>
-              ) : (
-                <img src={logo} alt="Doormile Express" style={logoStyle} />
-              )
-            }
-            headingHref="/doormile/dispatch"
-          />
-        }
         endContent={
           <HStack gap={1} vAlign="center" padding={0}>
             <DropdownMenu
@@ -170,10 +136,13 @@ const AppTopNav = ({ isSidebarCollapsed }) => {
 
             <DropdownMenu
               hasChevron={false}
-              button={{ label: firstname || 'Profile', icon: <Avatar src={avatar1} name={firstname} size="xsm" tooltip={false} />, variant: 'ghost' }}
+              button={{
+                label: firstname || 'Profile',
+                icon: <Avatar src={avatar1} name={firstname} size="xsm" tooltip={false} />,
+                variant: 'ghost'
+              }}
               items={[
                 { label: 'View Profile', icon: <EditOutlined />, onClick: () => navigate('/viewprofile') },
-                { label: 'Support Ticket', icon: <CommentOutlined /> },
                 { type: 'divider' },
                 { label: 'Logout', icon: <LogoutOutlined />, onClick: handleLogout }
               ]}
@@ -192,8 +161,4 @@ const AppTopNav = ({ isSidebarCollapsed }) => {
   );
 };
 
-AppTopNav.propTypes = {
-  isSidebarCollapsed: PropTypes.bool
-};
-
 export default AppTopNav;

src/layout/MainLayout/index.js

@@ -34,7 +34,7 @@ const MainLayout = () => {
         variant="section"
         height="auto"
         contentPadding={0}
-        topNav={<AppTopNav isSidebarCollapsed={isSidebarCollapsed} />}
+        topNav={<AppTopNav />}
         sideNav={<AppSideNav isCollapsed={isSidebarCollapsed} onCollapsedChange={setIsSidebarCollapsed} />}
         mobileNav={{ breakpoint: 'lg' }}
       >

src/pages/nearle/login.js

@@ -29,6 +29,7 @@ import { Text } from '@astryxdesign/core/Text';
 import { TextInput } from '@astryxdesign/core/TextInput';
 import { Button } from '@astryxdesign/core/Button';
 import { Link } from '@astryxdesign/core/Link';
+import { Divider } from '@astryxdesign/core/Divider';
 import { doormileTheme } from 'themes/astryx';
 
 const brandPanelStyle = {
@@ -246,20 +247,24 @@ const Login = () => {
 
           {/* ---- Right form panel ---- */}
           <Center axis="both" width="54%" height="100vh">
-            <VStack width="100%" maxWidth={420} gap={3} padding={3}>
+            <VStack width="100%" maxWidth={440} gap={4} padding={3}>
-              <Card padding={4} elevation="low">
+              <Card padding={8} elevation="med">
-                <VStack gap={0.5} hAlign="center" padding={0}>
+                <VStack gap={6} padding={0}>
+                  <VStack gap={1.5} hAlign="center" padding={0}>
                     <img src={logo} alt="Doormile" style={formLogoStyle} />
                     <Heading level={2}>Welcome back</Heading>
                     <Text type="supporting">Sign in to the Doormile Express console</Text>
                   </VStack>
 
+                  <Divider />
+
                   <form noValidate onSubmit={handleSubmit}>
-                  <VStack gap={3} padding={0}>
+                    <VStack gap={4} padding={0}>
                       <TextInput
                         hasAutoFocus
                         label="E-mail Address"
                         type="email"
+                        size="lg"
                         isRequired
                         value={username}
                         onChange={(value) => setUsername(value.toLocaleLowerCase())}
@@ -268,12 +273,13 @@ const Login = () => {
 
                       {/* Setup Password */}
                       {passwordStatus == 1 && (
-                      <VStack gap={3} padding={0}>
+                        <VStack gap={4} padding={0}>
-                        <Heading level={4}>Setup Password</Heading>
+                          <Divider label="Setup Password" />
                           <TextInput
                             hasAutoFocus
                             label="Enter New Password"
                             type="password"
+                            size="lg"
                             isRequired
                             value={password}
                             onChange={(value) => setPassword(value)}
@@ -281,6 +287,7 @@ const Login = () => {
                           <TextInput
                             label="Re-Enter Password"
                             type="password"
+                            size="lg"
                             isRequired
                             value={confirmPassword}
                             onChange={(value) => setConfirmPassword(value)}
@@ -295,12 +302,13 @@ const Login = () => {
 
                       {/* Enter Password */}
                       {passwordStatus == 2 && (
-                      <VStack gap={3} padding={0}>
+                        <VStack gap={4} padding={0}>
-                        <Heading level={4}>Enter Password</Heading>
+                          <Divider label="Enter Password" />
                           <TextInput
                             hasAutoFocus
                             label="Enter Password"
                             type="password"
+                            size="lg"
                             isRequired
                             value={password}
                             onChange={(value) => setPassword(value)}
@@ -329,17 +337,18 @@ const Login = () => {
                       <Button label="Continue" type="submit" variant="primary" size="lg" width="100%" />
                     </VStack>
                   </form>
+                </VStack>
               </Card>
 
               {/* footer */}
               <HStack justify="center" wrap="wrap" gap={2}>
-                <Link href="https://nearle.in" target="_blank" isExternalLink>
+                <Link href="https://nearle.in" target="_blank" isExternalLink type="supporting">
                   &copy; All rights reserved
                 </Link>
-                <Link href="https://nearle.in/terms" target="_blank" isExternalLink>
+                <Link href="https://nearle.in/terms" target="_blank" isExternalLink type="supporting">
                   Terms and Conditions
                 </Link>
-                <Link href="https://nearle.in/privacy" target="_blank" isExternalLink>
+                <Link href="https://nearle.in/privacy" target="_blank" isExternalLink type="supporting">
                   Privacy Policy
                 </Link>
               </HStack>