PulseApp/www
PulseApp/www
1
0
Fork 0
Code Issues Pull Requests 3 Actions Activity

make the user setting pages more responsive
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 1m0s
Details

Browse Source
This commit is contained in:
Braydon 2024-09-22 21:52:42 -04:00
parent 2e40f5bacf
commit 19596b9589
7 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(pages)/dashboard/user/settings/page.tsx
View File

@ -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 */}

4
src/components/dashboard/user/profile/avatar-setting.tsx
View File

@ -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

6
src/components/dashboard/user/profile/email-setting.tsx
View File

@ -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
/>

4
src/components/dashboard/user/profile/tier-setting.tsx
View File

@ -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.

6
src/components/dashboard/user/profile/username-setting.tsx
View File

@ -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
/>

8
src/components/dashboard/user/settings/device/devices-setting.tsx
View File

@ -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) => (

4
src/components/dashboard/user/settings/tfa/tfa-setting.tsx
View File

@ -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