Merge pull request #479 from starknet-id/feat/back-button-in-identity…

…-page feat: back button in identity page
lfglabs-dev · Nov 8, 2023 · f849a2a · f849a2a · vercel · Nov 8, 2023
2 parents fc5158e + a7f47dc
commit f849a2a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/pages/identities/[tokenId].tsx b/pages/identities/[tokenId].tsx
@@ -12,6 +12,7 @@ import IdentityPageSkeleton from "../../components/identities/skeletons/identity
 import UpdateProfilePic from "../../components/identities/updateProfilePic";
 import TxConfirmationModal from "../../components/UI/txConfirmationModal";
 import { StarknetIdJsContext } from "../../context/StarknetIdJsProvider";
+import BackButton from "../../components/UI/backButton";
 
 const TokenIdPage: NextPage = () => {
   const router = useRouter();
@@ -66,11 +67,14 @@ const TokenIdPage: NextPage = () => {
 
   return (
     <>
-      <div className={`${homeStyles.screen} z-10 `}>
+      <div className={styles.screen}>
         {isIdentityADomain === undefined ? (
           <IdentityPageSkeleton />
         ) : !isUpdatingPp ? (
           <div className={homeStyles.wrapperScreen}>
+            <div className={styles.backButton}>
+              <BackButton onClick={() => window.history.back()} />
+            </div>
             <div className={styles.containerIdentity}>
               <>
                 <div className={styles.identityBox}>

diff --git a/styles/components/backButton.module.css b/styles/components/backButton.module.css
@@ -11,7 +11,7 @@
 .backButtonLabel {
   color: var(--secondary);
   text-align: center;
-  font-family: Poppins-Bold;
+  font-family: "QuickZap";
   font-size: 15px;
   font-style: normal;
   font-weight: 700;

diff --git a/styles/components/identitiesV1.module.css b/styles/components/identitiesV1.module.css
@@ -35,7 +35,6 @@
 }
 
 .containerIdentity {
-  height: 100%;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -59,7 +58,6 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  height: 100%;
 }
 
 @media (min-width: 1124px) {
@@ -77,3 +75,17 @@
     left: 0;
   }
 }
+
+.backButton {
+  margin-left: 4rem;
+  margin-top: calc(12vh + 64px);
+  margin-bottom: 64px;
+}
+
+.wrapperScreen {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  min-height: calc(100% - 12vh);
+}