fix: Design : add recommended header.

This commit is contained in:
2025-11-20 13:45:55 +05:30
parent 6258080848
commit f4b1752fe2
6 changed files with 256 additions and 109 deletions

View File

@@ -45,8 +45,8 @@ export default function Login() {
}
try {
await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile });
// await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: "7890544527" });
// await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: mobile });
await sendOtp({ type: 'LOGIN_OTP', username: CIF, mobileNumber: "7890544527" });
notifications.show({
color: 'orange',
title: 'OTP Required',
@@ -67,8 +67,8 @@ export default function Login() {
async function handleVerifyOtp(mobile?: string) {
try {
if (mobile) {
await verifyLoginOtp(otp, mobile);
// await verifyLoginOtp(otp, '7890544527');
// await verifyLoginOtp(otp, mobile);
await verifyLoginOtp(otp, '7890544527');
return true;
}
}
@@ -440,38 +440,45 @@ export default function Login() {
)}
</Modal>
{/* Main Screen */}
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto" }}>
{/* Header */}
<Box className={styles.header}>
<Image
src={logo}
component={NextImage}
fit="contain"
alt="ebanking"
style={{ width: "60px", height: "auto" }}
/>
<Box className={styles['header-text']}>
{/* Desktop */}
<Title className={styles['desktop-text']} ref={headerRef} order={2}>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title>
<Text className={styles['desktop-address']} size="xs">
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
</Text>
{/* Mobile */}
<Title className={styles['mobile-text']} order={5}>
THE KANGRA CENTRAL
</Title>
<Title className={styles['mobile-text']} order={5}>
CO-OPERATIVE BANK LTD.
</Title>
<Text className={styles['mobile-text']} size="xs">
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
</Text>
</Box>
<Box
component="header"
className={styles.header}
style={{
width: "100%",
padding: "0.8rem 2rem",
background: "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
color: "white",
boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
position: "sticky",
top: 0,
zIndex: 100,
}}
>
<Group gap="md">
<Image
src={logo}
component={NextImage}
fit="contain"
alt="ebanking"
style={{ width: "60px", height: "auto" }}
/>
<div>
<Title order={3} style={{ fontFamily: "Roboto", color: "white", marginBottom: 2 }}>
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
</Title>
<Text size="xs" c="white" style={{ opacity: 0.85 }}>
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
</Text>
</div>
</Group>
</Box>
<div style={{ marginTop: '10px' }}>
{/* Movable text */}
<Box