make the user setting pages more responsive
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 1m0s
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 1m0s
This commit is contained in:
parent
2e40f5bacf
commit
19596b9589
@ -12,7 +12,7 @@ import DashboardHeader from "@/components/dashboard/dashboard-header";
|
|||||||
* @return the page jsx
|
* @return the page jsx
|
||||||
*/
|
*/
|
||||||
const UserSettingsPage = (): ReactElement => (
|
const UserSettingsPage = (): ReactElement => (
|
||||||
<main className="max-w-[47rem] flex flex-col gap-5">
|
<main className="max-w-[32rem] flex flex-col gap-5">
|
||||||
<DashboardHeader title="Settings" />
|
<DashboardHeader title="Settings" />
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
|
@ -16,9 +16,9 @@ const AvatarSetting = (): ReactElement => {
|
|||||||
(state: UserState) => state.user
|
(state: UserState) => state.user
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className="px-5 flex items-center">
|
<div className="flex flex-col gap-3 sm:flex-row items-start sm:items-center">
|
||||||
{/* Name & Description */}
|
{/* Name & Description */}
|
||||||
<div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
|
<div className="w-72 md:w-80 lg:w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
|
||||||
<h1 className="text-lg font-bold">Avatar</h1>
|
<h1 className="text-lg font-bold">Avatar</h1>
|
||||||
<p className="max-w-64 text-sm opacity-75">
|
<p className="max-w-64 text-sm opacity-75">
|
||||||
Set a profile picture for your account. This can be seen by
|
Set a profile picture for your account. This can be seen by
|
||||||
|
@ -16,9 +16,9 @@ const EmailSetting = (): ReactElement => {
|
|||||||
(state: UserState) => state.user
|
(state: UserState) => state.user
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className="px-5 flex items-center">
|
<div className="flex flex-col gap-3 lg:flex-row items-start lg:items-center">
|
||||||
{/* Name & Description */}
|
{/* Name & Description */}
|
||||||
<div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
|
<div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
|
||||||
<h1 className="text-lg font-bold">Email</h1>
|
<h1 className="text-lg font-bold">Email</h1>
|
||||||
<p className="max-w-64 text-sm opacity-75">
|
<p className="max-w-64 text-sm opacity-75">
|
||||||
The email you use to login to this account.
|
The email you use to login to this account.
|
||||||
@ -27,7 +27,7 @@ const EmailSetting = (): ReactElement => {
|
|||||||
|
|
||||||
{/* Setting */}
|
{/* Setting */}
|
||||||
<Input
|
<Input
|
||||||
className="w-60 rounded-lg select-none"
|
className="max-w-60 rounded-lg select-none"
|
||||||
value={user?.email}
|
value={user?.email}
|
||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
|
@ -18,9 +18,9 @@ const TierSetting = (): ReactElement => {
|
|||||||
(state: UserState) => state.user
|
(state: UserState) => state.user
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className="px-5 flex items-center">
|
<div className="flex flex-col gap-3 sm:flex-row items-start sm:items-center">
|
||||||
{/* Name & Description */}
|
{/* Name & Description */}
|
||||||
<div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
|
<div className="w-72 md:w-80 lg:w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
|
||||||
<h1 className="text-lg font-bold">Tier</h1>
|
<h1 className="text-lg font-bold">Tier</h1>
|
||||||
<p className="max-w-64 text-sm opacity-75">
|
<p className="max-w-64 text-sm opacity-75">
|
||||||
The tier of your account.
|
The tier of your account.
|
||||||
|
@ -16,9 +16,9 @@ const UsernameSetting = (): ReactElement => {
|
|||||||
(state: UserState) => state.user
|
(state: UserState) => state.user
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className="px-5 flex items-center">
|
<div className="flex flex-col gap-3 lg:flex-row items-start lg:items-center">
|
||||||
{/* Name & Description */}
|
{/* Name & Description */}
|
||||||
<div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
|
<div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
|
||||||
<h1 className="text-lg font-bold">Username</h1>
|
<h1 className="text-lg font-bold">Username</h1>
|
||||||
<p className="max-w-64 text-sm opacity-75">
|
<p className="max-w-64 text-sm opacity-75">
|
||||||
The username used to identify you on the app.
|
The username used to identify you on the app.
|
||||||
@ -27,7 +27,7 @@ const UsernameSetting = (): ReactElement => {
|
|||||||
|
|
||||||
{/* Setting */}
|
{/* Setting */}
|
||||||
<Input
|
<Input
|
||||||
className="w-60 rounded-lg select-none"
|
className="max-w-60 rounded-lg select-none"
|
||||||
value={user?.username}
|
value={user?.username}
|
||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
|
@ -41,18 +41,18 @@ const DevicesSetting = (): ReactElement => {
|
|||||||
}, [fetchDevices]);
|
}, [fetchDevices]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="px-5 flex flex-col gap-3.5 justify-center">
|
<div className="flex flex-col gap-3.5 justify-center">
|
||||||
{/* Name & Description */}
|
{/* Name & Description */}
|
||||||
<div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
|
<div className="max-w-96 flex flex-col gap-0.5 select-none pointer-events-none">
|
||||||
<h1 className="text-lg font-bold">Devices</h1>
|
<h1 className="text-lg font-bold">Devices</h1>
|
||||||
<p className="w-[25rem] text-sm opacity-75">
|
<p className="max-w-[15rem] text-sm opacity-75">
|
||||||
Here is a list of devices logged into your Pulse App
|
Here is a list of devices logged into your Pulse App
|
||||||
account.
|
account.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Setting */}
|
{/* Setting */}
|
||||||
<div className="w-[27.7rem] flex flex-col gap-2">
|
<div className="max-w-[27.7rem] flex flex-col gap-2">
|
||||||
{!devices ? (
|
{!devices ? (
|
||||||
<>
|
<>
|
||||||
{Array.from({ length: 4 }, (_, index) => (
|
{Array.from({ length: 4 }, (_, index) => (
|
||||||
|
@ -101,9 +101,9 @@ const TFASetting = (): ReactElement => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="px-5 flex items-center">
|
<div className="flex flex-col gap-3 xs:flex-row items-start xs:items-center">
|
||||||
{/* Name & Description */}
|
{/* Name & Description */}
|
||||||
<div className="w-96 flex flex-col gap-0.5 select-none pointer-events-none">
|
<div className="w-80 md:w-96 flex flex-col gap-0.5 select-none pointer-events-none transition-all transform-gpu">
|
||||||
<h1 className="text-lg font-bold">Two-Factor Auth</h1>
|
<h1 className="text-lg font-bold">Two-Factor Auth</h1>
|
||||||
<p className="max-w-64 text-sm opacity-75">
|
<p className="max-w-64 text-sm opacity-75">
|
||||||
Enhance your account security with an extra layer of
|
Enhance your account security with an extra layer of
|
||||||
|
Loading…
x
Reference in New Issue
Block a user