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
|
||||
*/
|
||||
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" />
|
||||
|
||||
{/* Content */}
|
||||
|
@ -16,9 +16,9 @@ const AvatarSetting = (): ReactElement => {
|
||||
(state: UserState) => state.user
|
||||
);
|
||||
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 */}
|
||||
<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>
|
||||
<p className="max-w-64 text-sm opacity-75">
|
||||
Set a profile picture for your account. This can be seen by
|
||||
|
@ -16,9 +16,9 @@ const EmailSetting = (): ReactElement => {
|
||||
(state: UserState) => state.user
|
||||
);
|
||||
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 */}
|
||||
<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>
|
||||
<p className="max-w-64 text-sm opacity-75">
|
||||
The email you use to login to this account.
|
||||
@ -27,7 +27,7 @@ const EmailSetting = (): ReactElement => {
|
||||
|
||||
{/* Setting */}
|
||||
<Input
|
||||
className="w-60 rounded-lg select-none"
|
||||
className="max-w-60 rounded-lg select-none"
|
||||
value={user?.email}
|
||||
disabled
|
||||
/>
|
||||
|
@ -18,9 +18,9 @@ const TierSetting = (): ReactElement => {
|
||||
(state: UserState) => state.user
|
||||
);
|
||||
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 */}
|
||||
<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>
|
||||
<p className="max-w-64 text-sm opacity-75">
|
||||
The tier of your account.
|
||||
|
@ -16,9 +16,9 @@ const UsernameSetting = (): ReactElement => {
|
||||
(state: UserState) => state.user
|
||||
);
|
||||
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 */}
|
||||
<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>
|
||||
<p className="max-w-64 text-sm opacity-75">
|
||||
The username used to identify you on the app.
|
||||
@ -27,7 +27,7 @@ const UsernameSetting = (): ReactElement => {
|
||||
|
||||
{/* Setting */}
|
||||
<Input
|
||||
className="w-60 rounded-lg select-none"
|
||||
className="max-w-60 rounded-lg select-none"
|
||||
value={user?.username}
|
||||
disabled
|
||||
/>
|
||||
|
@ -41,18 +41,18 @@ const DevicesSetting = (): ReactElement => {
|
||||
}, [fetchDevices]);
|
||||
|
||||
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 */}
|
||||
<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>
|
||||
<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
|
||||
account.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Setting */}
|
||||
<div className="w-[27.7rem] flex flex-col gap-2">
|
||||
<div className="max-w-[27.7rem] flex flex-col gap-2">
|
||||
{!devices ? (
|
||||
<>
|
||||
{Array.from({ length: 4 }, (_, index) => (
|
||||
|
@ -101,9 +101,9 @@ const TFASetting = (): ReactElement => {
|
||||
};
|
||||
|
||||
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 */}
|
||||
<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>
|
||||
<p className="max-w-64 text-sm opacity-75">
|
||||
Enhance your account security with an extra layer of
|
||||
|
Loading…
x
Reference in New Issue
Block a user