add About Us modal in mobile too

AlphadayHQ · Aug 9, 2024 · e529318 · e529318
1 parent 7030a75
commit e529318
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
@@ -9,6 +9,7 @@ import { Logger } from "src/api/utils/logging";
 import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-down2.svg";
 import { ReactComponent as DocSVG } from "src/assets/icons/doc.svg";
 import { ReactComponent as GreenCheckSVG } from "src/assets/icons/green-check.svg";
+import { ReactComponent as InfoSVG } from "src/assets/icons/info2.svg";
 import { ReactComponent as LogoutSVG } from "src/assets/icons/logout.svg";
 import { ReactComponent as StarSVG } from "src/assets/icons/star.svg";
 import { ReactComponent as UserSVG } from "src/assets/icons/user.svg";
@@ -97,13 +98,15 @@ interface IUserSettings {
     onSaveProfile: (req: { handle: string }) => void;
     isSavingProfile: boolean;
     onLogout: () => Promise<void>;
+    onShowAboutUsModal: () => void;
 }
 const UserSettings: FC<IUserSettings> = ({
     profile,
     isAuthenticated,
     onSaveProfile,
     isSavingProfile,
     onLogout,
+    onShowAboutUsModal,
 }) => {
     const [showProfileEditModal, setShowProfileEditModal] =
         useState<boolean>(false);
@@ -154,6 +157,13 @@ const UserSettings: FC<IUserSettings> = ({
                     "https://app.termly.io/document/terms-of-use-for-website/0f183823-fe52-47af-87d2-d1058b844918"
                 ),
         },
+        {
+            id: "about",
+            icon: InfoSVG,
+            title: "About Us",
+            subtext: "Learn more about Alphaday",
+            onClick: onShowAboutUsModal,
+        },
         {
             id: "rate",
             icon: StarSVG,

diff --git a/packages/frontend/src/mobile-containers/UserSettingsContainer.tsx b/packages/frontend/src/mobile-containers/UserSettingsContainer.tsx
@@ -1,19 +1,25 @@
 import { FC } from "react";
 import { useAccount, useAuth } from "src/api/hooks";
+import { toggleAboutModal } from "src/api/store";
+import { useAppDispatch } from "src/api/store/hooks";
 import { debounce } from "src/api/utils/helpers";
 import UserSettings from "src/mobile-components/profile/UserSettings";
 
 const UserSettingsContainer: FC = () => {
+    const dispatch = useAppDispatch();
     const { isAuthenticated, logout } = useAuth();
     const { userProfile, saveProfile, isSavingProfile } = useAccount();
 
+    const toggleAboutUsModal = () => dispatch(toggleAboutModal());
+
     return (
         <UserSettings
             profile={userProfile}
             isAuthenticated={isAuthenticated}
             onSaveProfile={debounce(saveProfile, 1000)}
             isSavingProfile={isSavingProfile}
             onLogout={logout}
+            onShowAboutUsModal={toggleAboutUsModal}
         />
     );
 };

diff --git a/packages/frontend/src/mobile-pages/user-settings.tsx b/packages/frontend/src/mobile-pages/user-settings.tsx
@@ -1,10 +1,12 @@
+import { AboutUsModalContainer } from "src/containers/AboutUsModalContainer";
 import PagedMobileLayout from "src/layout/PagedMobileLayout";
 import UserSettingsContainer from "src/mobile-containers/UserSettingsContainer";
 
 const UserSettings: React.FC = () => {
     return (
         <PagedMobileLayout title="">
             <UserSettingsContainer />
+            <AboutUsModalContainer />
         </PagedMobileLayout>
     );
 };