Merge pull request #237 from hotosm/feat/user-profile

Feat: add scroll to top button and make user profile page responsive

src/frontend/src/App.tsx

@@ -19,6 +19,7 @@ import {
   getModalContent,
   getPromptDialogContent,
 } from '@Constants/modalContents';
+import ScrollToTop from '@Components/common/ScrollToTop';
 
 export default function App() {
   const dispatch = useTypedDispatch();
@@ -81,13 +82,21 @@ export default function App() {
         >
           {getPromptDialogContent(promptDialogContent)?.content}
         </PromptDialog>
-
-        {generateRoutes({
-          routes:
-            process.env.NODE_ENV !== 'production'
-              ? [...testRoutes, ...appRoutes]
-              : appRoutes,
-        })}
+        <div
+          id="app_playground"
+          className="app_playground scrollbar naxatw-overflow-y-auto naxatw-px-3"
+          style={{
+            height: 'calc(100vh-3.5rem)',
+          }}
+        >
+          {generateRoutes({
+            routes:
+              process.env.NODE_ENV !== 'production'
+                ? [...testRoutes, ...appRoutes]
+                : appRoutes,
+          })}
+        </div>
+        <ScrollToTop />
       </div>
     </>
   );

src/frontend/src/components/UserProfile/FormContents/Password/index.tsx

@@ -31,9 +31,9 @@ export default function PasswordSection({ formProps }: { formProps: any }) {
           <Input
             type="password"
             className="naxatw-mt-1"
-            placeholder="Enter Password Again"
+            placeholder="Enter confirm Password"
             {...register('confirm_password', {
-              required: 'Type password Again',
+              required: 'Confirm Password is Required',
             })}
           />
           <ErrorMessage message={formState.errors?.confirm_password?.message} />

src/frontend/src/components/common/Navbar/index.tsx

@@ -10,7 +10,7 @@ export default function Navbar() {
   const navigate = useNavigate();
 
   return (
-    <nav className="naxatw-border-b naxatw-border-grey-300 naxatw-pb-2 naxatw-pt-4">
+    <nav className="naxatw-h-[3.5rem] naxatw-border-b naxatw-border-grey-300 naxatw-pb-2 naxatw-pt-4">
       <FlexRow className="naxatw-items-center naxatw-justify-between naxatw-px-16">
         <div
           className="naxatw-cursor-pointer"

src/frontend/src/components/common/ScrollToTop/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+const ScrollToTop: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      const playgroundElement = document.getElementById('app_playground');
+      if (playgroundElement && playgroundElement?.scrollTop > 400) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    const playgroundElement = document.getElementById('app_playground');
+    playgroundElement?.addEventListener('scroll', toggleVisibility);
+
+    return () => {
+      playgroundElement?.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    const playgroundElement = document.getElementById('app_playground');
+    playgroundElement?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <div
+      className={`naxatw-fixed naxatw-bottom-4 naxatw-right-6 naxatw-z-40 naxatw-animate-bounce ${
+        isVisible ? 'naxatw-opacity-100' : 'naxatw-hidden naxatw-opacity-0'
+      }`}
+    >
+      <button
+        type="button"
+        className="hover:naxatw-bg-teal-green-600 naxatw-h-10 naxatw-w-10 naxatw-rounded-full naxatw-bg-red naxatw-p-2 naxatw-font-bold naxatw-text-white naxatw-shadow"
+        onClick={scrollToTop}
+      >
+        <i className="material-icons">arrow_upward</i>
+      </button>
+    </div>
+  );
+};
+
+export default ScrollToTop;

src/frontend/src/views/TaskDescription/index.tsx

@@ -6,10 +6,9 @@ import hasErrorBoundary from '@Utils/hasErrorBoundary';
 
 const TaskDescription = () => {
   const { width } = useWindowDimensions();
-
   return (
     <>
-      <div className="naxatw-min-h-[calc(100vh-60px)]">
+      <div className="naxatw-h-screen-nav">
         <div className="naxatw-mx-auto naxatw-w-11/12 naxatw-max-w-[90rem] naxatw-px-0 naxatw-pb-[2.9375rem] naxatw-pt-3 md:naxatw-px-8">
           <div className="naxatw-flex naxatw-flex-col naxatw-gap-3">
             <DroneOperatorTaskHeader />

src/frontend/src/views/UserProfile/index.tsx

@@ -22,6 +22,7 @@ import { removeKeysFromObject } from '@Utils/index';
 import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
 import Tab from '@Components/common/Tabs';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
+import useWindowDimensions from '@Hooks/useWindowDimensions';
 
 const getActiveFormContent = (
   activeTab: number,
@@ -47,7 +48,7 @@ const getActiveFormContent = (
 const UserProfile = () => {
   const dispatch = useTypedDispatch();
   const navigate = useNavigate();
-
+  const { width } = useWindowDimensions();
   const signedInAs = localStorage.getItem('signedInAs') || 'Project Creator';
   const isDroneOperator =
     localStorage.getItem('signedInAs') === 'Drone Operator';
@@ -123,35 +124,33 @@ const UserProfile = () => {
   };
 
   return (
-    <section className="naxatw-h-screen-nav naxatw-bg-grey-50 naxatw-px-16 naxatw-pt-8">
+    <section className="naxatw-h-screen">
       <UserProfileHeader />
-      <section className="naxatw-mt-5 naxatw-bg-grey-50 naxatw-px-5 xl:naxatw-px-20 2xl:naxatw-px-60">
-        <div className="naxatw-grid naxatw-h-[38rem] naxatw-grid-cols-3 naxatw-gap-14 naxatw-bg-white naxatw-py-5">
-          <div className="naxatw-col-span-1">
-            <Tab
-              orientation="column"
-              onTabChange={() => {}}
-              tabOptions={tabOptions}
-              activeTab={userProfileActiveTab}
-            />
-          </div>
-          <div className="naxatw-relative naxatw-col-span-2">
+      <div className="naxatw-mx-auto naxatw-flex naxatw-h-[80vh] naxatw-w-full naxatw-flex-col naxatw-gap-2 naxatw-border naxatw-shadow-lg md:naxatw-w-[34rem] md:naxatw-flex-row">
+        <div className="naxatw-w-full naxatw-border-r md:naxatw-w-2/6">
+          <Tab
+            className="naxatw-w-full naxatw-border-b"
+            orientation={width < 768 ? 'row' : 'column'}
+            onTabChange={() => {}}
+            tabOptions={tabOptions}
+            activeTab={userProfileActiveTab}
+          />
+        </div>
+        <div className="naxatw-flex naxatw-flex-[70%] naxatw-flex-col naxatw-justify-between naxatw-py-1">
+          <div className="naxatw-h-[calc(80vh-7rem)] naxatw-overflow-y-scroll md:naxatw-h-[calc(80vh-5rem)]">
             {getActiveFormContent(userProfileActiveTab, signedInAs, formProps)}
-            {userProfileActiveTab !== 1 && (
-              <Button
-                variant="ghost"
-                className="naxatw-absolute naxatw-bottom-0 naxatw-left-[3.75rem] naxatw-border naxatw-border-red naxatw-text-red"
-                leftIcon="chevron_left"
-                onClick={onBackBtnClick}
-              >
-                Previous
-              </Button>
-            )}
+          </div>
+          <div className="naxatw-flex naxatw-h-[50px] naxatw-justify-between naxatw-px-12 naxatw-py-1">
+            <Button
+              className="naxatw-text-red"
+              variant="ghost"
+              onClick={onBackBtnClick}
+              leftIcon="chevron_left"
+            >
+              Back
+            </Button>
             <Button
-              className="naxatw-absolute naxatw-bottom-0 naxatw-right-[3.75rem] naxatw-bg-red"
-              rightIcon={
-                userProfileActiveTab !== 3 ? 'chevron_right' : undefined
-              }
+              className="naxatw-bg-red"
               onClick={e => {
                 e.preventDefault();
                 handleSubmit(onSubmit)();
@@ -162,7 +161,7 @@ const UserProfile = () => {
             </Button>
           </div>
         </div>
-      </section>
+      </div>
     </section>
   );
 };