Skip to content

Commit 994b007

Browse files
elhagen13elhagen13
committed
update ui
1 parent 867b2ce commit 994b007

File tree

3 files changed

+183
-66
lines changed

3 files changed

+183
-66
lines changed

‎src/app/changePassword/page.tsx‎

Lines changed: 181 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
"use client";
2-
import { Grid, Text, Button, Flex, Link, Box, Center, Input, FormControl } from "@chakra-ui/react";
2+
import { Grid, Text, Button, Flex, Link, Box, Center, Input, FormControl, VStack, HStack } from "@chakra-ui/react";
33
import React, { useEffect, useState } from "react";
44
import { InputUser, TextUser } from "@/styles/UserStyle";
55
import { useUser } from "@clerk/nextjs";
66
import { isMobile } from "react-device-detect";
77
import { Router } from "express";
88
import { useRouter } from "next/navigation";
9-
// import ChangePasswordMobile from "@/components/ChangePasswordMobile";
109

1110
export default function ChangePassword() {
1211
const { user } = useUser();
@@ -61,30 +60,59 @@ export default function ChangePassword() {
6160
showToast("Failed to update password. Please check your current password.", "error");
6261
}
6362
};
63+
6464
if (!isClient) {
6565
return null;
6666
}
6767

68-
// if (isMobileDevice) {
69-
// return <ChangePasswordMobile />;
70-
// } else {
7168
return (
72-
<Box style={{ backgroundColor: "#F4F1E8", height: "100%", width: "100%", overflowY: "auto" }}>
73-
<Box maxH="90vh" p={10}>
69+
<Box
70+
style={{
71+
backgroundColor: "#F4F1E8",
72+
minHeight: "100vh",
73+
width: "100%",
74+
overflowY: "auto",
75+
}}
76+
>
77+
<Box maxH={{ base: "100vh", md: "90vh" }} p={{ base: 4, md: 10 }} pt={{ base: 6, md: 10 }}>
7478
<Center>
75-
<Flex mt={25} direction="column" w="900px" maxW="100%">
76-
<Flex align="center" justify="space-between" mb={6}>
77-
<Text fontSize="3xl" fontWeight="bold" textStyle="4xl">
79+
<Flex
80+
mt={{ base: 4, md: 25 }}
81+
direction="column"
82+
w={{ base: "100%", md: "900px" }}
83+
maxW="100%"
84+
px={{ base: 2, md: 0 }}
85+
>
86+
{/* Header Section */}
87+
<Flex
88+
align={{ base: "flex-start", md: "center" }}
89+
justify="space-between"
90+
mb={6}
91+
direction={{ base: "column", md: "row" }}
92+
gap={{ base: 4, md: 0 }}
93+
>
94+
<Text fontSize={{ base: "2xl", md: "3xl" }} fontWeight="bold" textStyle="4xl">
7895
Change Password
7996
</Text>
97+
98+
{/* Toast Message */}
8099
{toastMsg && (
81-
<Box borderRadius="lg" px={4} py={2} bg="white" color="black" fontWeight="medium">
82-
<Flex align="center" gap={4}>
100+
<Box
101+
borderRadius="lg"
102+
px={{ base: 3, md: 4 }}
103+
py={2}
104+
bg="white"
105+
color="black"
106+
fontWeight="medium"
107+
w={{ base: "100%", md: "auto" }}
108+
boxShadow="md"
109+
>
110+
<Flex align="center" gap={{ base: 2, md: 4 }}>
83111
{toastStatus === "success" ? (
84112
<svg
85113
xmlns="http://www.w3.org/2000/svg"
86-
width="30"
87-
height="30"
114+
width="24"
115+
height="24"
88116
viewBox="0 0 24 24"
89117
fill="none"
90118
stroke="#596334"
@@ -112,64 +140,154 @@ export default function ChangePassword() {
112140
<path d="m9 9 6 6" />
113141
</svg>
114142
)}
115-
<Flex direction={"column"}>
116-
<Text size="med" fontWeight={toastStatus === "success" ? "bold" : "normal"}>
143+
<VStack align="flex-start" spacing={0}>
144+
<Text
145+
fontSize={{ base: "sm", md: "md" }}
146+
fontWeight={toastStatus === "success" ? "bold" : "normal"}
147+
>
117148
{toastStatus === "success" ? "Saved" : "Error"}
118149
</Text>
119-
<Text>{toastMsg}</Text>
120-
</Flex>
150+
<Text fontSize={{ base: "xs", md: "sm" }}>{toastMsg}</Text>
151+
</VStack>
121152
</Flex>
122153
</Box>
123154
)}
124155
</Flex>
125156

126-
<Box borderRadius="15px" bg="white" p={10} w="100%" color="black">
157+
{/* Form Section */}
158+
<Box borderRadius="15px" bg="white" p={{ base: 6, md: 10 }} w="100%" color="black" boxShadow="lg">
127159
<FormControl>
128-
<Grid templateColumns="220px 1fr" columnGap={20} rowGap={7} alignItems="center">
129-
<Text {...TextUser}>Current Password</Text>
130-
<Input
131-
{...InputUser}
132-
placeholder="Current Password"
133-
value={currentPassword}
134-
onChange={(e) => setCurrentPassword(e.target.value)}
135-
type="password"
136-
w="100%"
137-
mt={0}
138-
/>
139-
140-
<Text {...TextUser}>New Password</Text>
141-
<Input
142-
{...InputUser}
143-
placeholder="New Password"
144-
value={newPassword}
145-
onChange={(e) => setNewPassword(e.target.value)}
146-
type="password"
147-
w="100%"
148-
mt={0}
149-
/>
150-
151-
<Text {...TextUser}>Confirm New Password</Text>
152-
<Input
153-
{...InputUser}
154-
placeholder="Confirm New Password"
155-
value={confirmNewPasssord}
156-
onChange={(e) => setConfirmNewPassword(e.target.value)}
157-
type="password"
158-
w="100%"
159-
mt={0}
160-
/>
161-
162-
<Flex gridColumn="1 / span 2" justifyContent="flex-start" mt={6} gap={4}>
163-
<Button onClick={changePassword} borderRadius={20} backgroundColor="#596334">
164-
<Text color="white">Save</Text>
165-
</Button>
166-
<Box onClick={() => router.push("/userProfile")}>
167-
<Button borderRadius={20} backgroundColor="white" borderColor="#596334" borderWidth={1}>
168-
<Text color="#596334">Cancel</Text>
160+
{/* Desktop Grid Layout */}
161+
<Box display={{ base: "none", md: "block" }}>
162+
<Grid templateColumns="220px 1fr" columnGap={20} rowGap={7} alignItems="center">
163+
<Text {...TextUser}>Current Password</Text>
164+
<Input
165+
{...InputUser}
166+
placeholder="Current Password"
167+
value={currentPassword}
168+
onChange={(e) => setCurrentPassword(e.target.value)}
169+
type="password"
170+
w="100%"
171+
mt={0}
172+
/>
173+
174+
<Text {...TextUser}>New Password</Text>
175+
<Input
176+
{...InputUser}
177+
placeholder="New Password"
178+
value={newPassword}
179+
onChange={(e) => setNewPassword(e.target.value)}
180+
type="password"
181+
w="100%"
182+
mt={0}
183+
/>
184+
185+
<Text {...TextUser}>Confirm New Password</Text>
186+
<Input
187+
{...InputUser}
188+
placeholder="Confirm New Password"
189+
value={confirmNewPasssord}
190+
onChange={(e) => setConfirmNewPassword(e.target.value)}
191+
type="password"
192+
w="100%"
193+
mt={0}
194+
/>
195+
196+
<Flex gridColumn="1 / span 2" justifyContent="flex-start" mt={6} gap={4}>
197+
<Button onClick={changePassword} borderRadius={20} backgroundColor="#596334">
198+
<Text color="white">Save</Text>
169199
</Button>
170-
</Box>
171-
</Flex>
172-
</Grid>
200+
<Box onClick={() => router.push("/userProfile")}>
201+
<Button borderRadius={20} backgroundColor="white" borderColor="#596334" borderWidth={1}>
202+
<Text color="#596334">Cancel</Text>
203+
</Button>
204+
</Box>
205+
</Flex>
206+
</Grid>
207+
</Box>
208+
209+
{/* Mobile VStack Layout */}
210+
<Box display={{ base: "block", md: "none" }}>
211+
<VStack spacing={6} align="stretch">
212+
<VStack spacing={2} align="stretch">
213+
<Text {...TextUser} fontSize="md" fontWeight="medium">
214+
Current Password
215+
</Text>
216+
<Input
217+
{...InputUser}
218+
placeholder="Enter current password"
219+
value={currentPassword}
220+
onChange={(e) => setCurrentPassword(e.target.value)}
221+
type="password"
222+
w="100%"
223+
mt={0}
224+
size="lg"
225+
/>
226+
</VStack>
227+
228+
<VStack spacing={2} align="stretch">
229+
<Text {...TextUser} fontSize="md" fontWeight="medium">
230+
New Password
231+
</Text>
232+
<Input
233+
{...InputUser}
234+
placeholder="Enter new password"
235+
value={newPassword}
236+
onChange={(e) => setNewPassword(e.target.value)}
237+
type="password"
238+
w="100%"
239+
mt={0}
240+
size="lg"
241+
/>
242+
</VStack>
243+
244+
<VStack spacing={2} align="stretch">
245+
<Text {...TextUser} fontSize="md" fontWeight="medium">
246+
Confirm New Password
247+
</Text>
248+
<Input
249+
{...InputUser}
250+
placeholder="Confirm new password"
251+
value={confirmNewPasssord}
252+
onChange={(e) => setConfirmNewPassword(e.target.value)}
253+
type="password"
254+
w="100%"
255+
mt={0}
256+
size="lg"
257+
/>
258+
</VStack>
259+
260+
{/* Mobile Button Layout */}
261+
<VStack spacing={3} pt={4} w="100%">
262+
<Button
263+
onClick={changePassword}
264+
borderRadius={20}
265+
backgroundColor="#596334"
266+
w="100%"
267+
size="lg"
268+
py={6}
269+
>
270+
<Text color="white" fontSize="md" fontWeight="medium">
271+
Save Changes
272+
</Text>
273+
</Button>
274+
<Button
275+
onClick={() => router.push("/userProfile")}
276+
borderRadius={20}
277+
backgroundColor="white"
278+
borderColor="#596334"
279+
borderWidth={1}
280+
w="100%"
281+
size="lg"
282+
py={6}
283+
>
284+
<Text color="#596334" fontSize="md" fontWeight="medium">
285+
Cancel
286+
</Text>
287+
</Button>
288+
</VStack>
289+
</VStack>
290+
</Box>
173291
</FormControl>
174292
</Box>
175293
</Flex>
@@ -178,4 +296,3 @@ export default function ChangePassword() {
178296
</Box>
179297
);
180298
}
181-
// }

‎src/app/treeTable/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ export default function TreeTable() {
280280

281281
useEffect(() => {
282282
if (defaultSetting === "decreasingCondition") {
283-
setSortOrder("desc");
283+
setSortOrder("descCondition");
284284
}
285285
}, []);
286286

‎src/components/UserProfileMobile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export default function UserProfileMobile() {
126126
</GridItem>
127127
<GridItem colSpan={1}>
128128
<Flex justifyContent="flex-end">
129-
<Box onClick={() => router.push("/")}>
129+
<Box onClick={() => router.push("/changePassword")}>
130130
<Button mt={5} borderRadius={20} backgroundColor="white" borderColor="#596334" borderWidth={1}>
131131
<Text fontSize="xs" color="#596334">
132132
Change Password

0 commit comments

Comments
 (0)