diff --git a/packages/frontend/src/mobile-components/profile/EditProfileModal.tsx b/packages/frontend/src/mobile-components/profile/EditProfileModal.tsx index ce6bb987..113ca938 100644 --- a/packages/frontend/src/mobile-components/profile/EditProfileModal.tsx +++ b/packages/frontend/src/mobile-components/profile/EditProfileModal.tsx @@ -61,7 +61,11 @@ export const EditProfileModal: FC = ({ diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx index 126cf740..523b59ad 100644 --- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx +++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx @@ -1,11 +1,13 @@ import { FC, useState } from "react"; -import { twMerge } from "@alphaday/ui-kit"; +import { MiniDialog, Spinner, twMerge } from "@alphaday/ui-kit"; import md5 from "md5"; import { Link, useHistory } from "react-router-dom"; +import { usePrevious } from "src/api/hooks"; import { TUserProfile } from "src/api/types"; 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 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"; @@ -102,6 +104,12 @@ const UserSettings: FC = ({ const [showProfileEditModal, setShowProfileEditModal] = useState(false); const history = useHistory(); + const [isProfileUpdated, setIsProfileUpdated] = useState(false); + const prevIsSavingProfile = usePrevious(isSavingProfile); + + if (prevIsSavingProfile === true && isSavingProfile === false) { + setIsProfileUpdated(true); + } const navigate = (link: string) => { history.push(link); @@ -231,6 +239,27 @@ const UserSettings: FC = ({ isSavingProfile={isSavingProfile} onCloseModal={handleCloseModal} /> + +
+ Saving changes to your profile +
+
+ +
+
+ } + show={isProfileUpdated} + title="Profile Updated" + onActionClick={() => { + setIsProfileUpdated(false); + history.push(EMobileRoutePaths.UserSettings); + }} + > +
+ Your Profile has been updated +
+
); }; diff --git a/packages/ui-kit/src/components/dialog/MiniDialog.tsx b/packages/ui-kit/src/components/dialog/MiniDialog.tsx index 988953c9..8a879d1d 100644 --- a/packages/ui-kit/src/components/dialog/MiniDialog.tsx +++ b/packages/ui-kit/src/components/dialog/MiniDialog.tsx @@ -27,8 +27,8 @@ export const MiniDialog: React.FC = ({ className="w-full gap-2 rounded-xl bg-zinc-800 px-5 py-6" >
- {icon &&
{icon}
} -
+ {icon &&
{icon}
} +
{title}