feat: identities page rework

lfglabs-dev · Oct 8, 2023 · 2675638 · 2675638
1 parent aa322eb
commit 2675638
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 58 deletions.
diff --git a/components/identities/identitiesGalleryV1.tsx b/components/identities/identitiesGalleryV1.tsx
@@ -22,7 +22,7 @@ const IdentitiesGalleryV1: FunctionComponent<IdentitiesGalleryV1Props> = ({
   const router = useRouter();
   return (
     // Our Indexer
-    <>
+    <div className={styles.galeryContainer}>
       {identities.map((identity, index) => {
         return (
           <div key={index} className={styles.imageGallery}>
@@ -46,7 +46,9 @@ const IdentitiesGalleryV1: FunctionComponent<IdentitiesGalleryV1Props> = ({
               onClick={() => router.push(`/identities/${identity.id}`)}
             />
             {identity.domain ? (
-              <p className="font-bold mt-2">{minifyDomain(identity.domain)}</p>
+              <p className="font-bold font-quickZap">
+                {minifyDomain(identity.domain)}
+              </p>
             ) : null}
           </div>
         );
@@ -87,35 +89,20 @@ const IdentitiesGalleryV1: FunctionComponent<IdentitiesGalleryV1Props> = ({
 
         return (
           <div key={index} className={styles.imageGallery}>
+            {getIdentityImage(domainKind)}
+            <p className="font-bold mt-2">{minifyDomain(domain)}</p>
             <div className={styles.expiryWarning}>
               <Tooltip
                 title="This is domain is an external domain and is not an identity, you won't see it on your wallet."
                 arrow
               >
-                <ErrorIcon color="error" />
+                <ErrorIcon color="warning" />
               </Tooltip>
             </div>
-            {getIdentityImage(domainKind)}
-            <p className="font-bold mt-2">{minifyDomain(domain)}</p>
           </div>
         );
       })}
-    </>
-
-    // // Aspect indexer
-    // <>
-    //   {identities.map((asset, index) => (
-    //     <div key={index} className={styles.imageGallery}>
-    //       <img
-    //         width={150}
-    //         height={150}
-    //         src={`https://www.starknet.id/api/identicons/${asset.token_id}`}
-    //         alt="avatar"
-    //         onClick={() => router.push(`/identities/${asset.token_id}`)}
-    //       />
-    //     </div>
-    //   ))}
-    // </>
+    </div>
   );
 };
 

diff --git a/pages/identities.tsx b/pages/identities.tsx
@@ -8,12 +8,13 @@ import {
 } from "@starknet-react/core";
 import { useEffect, useState } from "react";
 import IdentitiesGallery from "../components/identities/identitiesGalleryV1";
-import MintIdentity from "../components/identities/mintIdentity";
+import MintIcon from "../components/UI/iconsComponents/icons/mintIcon";
 import { useRouter } from "next/router";
 import { hexToDecimal } from "../utils/feltService";
 import IdentitiesSkeleton from "../components/identities/identitiesSkeleton";
 import TxConfirmationModal from "../components/UI/txConfirmationModal";
 import Wallets from "../components/UI/wallets";
+import ClickableAction from "../components/UI/iconsComponents/clickableAction";
 
 const Identities: NextPage = () => {
   const { account, address } = useAccount();
@@ -84,37 +85,50 @@ const Identities: NextPage = () => {
 
   return (
     <>
-      <div className={styles.screen}>
-        <div className="firstLeavesGroup">
-          <img width="100%" alt="leaf" src="/leaves/new/leavesGroup02.svg" />
-        </div>
-        <div className="secondLeavesGroup">
-          <img width="100%" alt="leaf" src="/leaves/new/leavesGroup01.svg" />
-        </div>
-        <div className={styles.container}>
-          <h1 className="title">Your Starknet identities</h1>
-
-          <div className={styles.containerGallery}>
-            {loading ? (
-              <IdentitiesSkeleton />
-            ) : (
-              <IdentitiesGallery
-                identities={ownedIdentities}
-                externalDomains={externalDomains}
-              />
-            )}
-            <MintIdentity
+      <div className="firstLeavesGroup">
+        <img width="100%" alt="leaf" src="/leaves/new/leavesGroup02.svg" />
+      </div>
+      <div className="secondLeavesGroup">
+        <img width="100%" alt="leaf" src="/leaves/new/leavesGroup01.svg" />
+      </div>
+      <div className={styles.containerGallery}>
+        <div>
+          {loading ? (
+            <IdentitiesSkeleton />
+          ) : ownedIdentities.length + externalDomains.length === 0 ? (
+            <>
+              <h1 className="title text-center">
+                All Your Identities in One Place
+              </h1>
+              <p className="description text-center mb-6">
+                Easily access and manage all your identities from one
+                centralized location. Streamline your digital presence with
+                convenience and control.
+              </p>
+            </>
+          ) : (
+            <IdentitiesGallery
+              identities={ownedIdentities}
+              externalDomains={externalDomains}
+            />
+          )}
+          <div className="w-full flex justify-center items-center px-4">
+            <ClickableAction
+              title="ADD IDENTITIES"
+              icon={<MintIcon />}
               onClick={address ? () => mint() : () => setWalletModalOpen(true)}
+              width="auto"
             />
           </div>
         </div>
-        <TxConfirmationModal
-          txHash={mintData?.transaction_hash}
-          isTxModalOpen={isTxModalOpen}
-          closeModal={() => setIsTxModalOpen(false)}
-          title="Your identity NFT is on it's way !"
-        />
       </div>
+      <TxConfirmationModal
+        txHash={mintData?.transaction_hash}
+        isTxModalOpen={isTxModalOpen}
+        closeModal={() => setIsTxModalOpen(false)}
+        title="Your identity NFT is on it's way !"
+      />
+
       <Wallets
         closeWallet={() => setWalletModalOpen(false)}
         hasWallet={walletModalOpen}

diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -27,14 +27,12 @@
 }
 
 .containerGallery {
+  margin-top: 12vh;
+  min-height: 88vh;
   display: flex;
-  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  margin-top: 2rem;
-  max-height: 100%;
-  max-width: 50rem;
-  overflow-y: auto;
+  flex-direction: column;
 }
 
 .title {

diff --git a/styles/components/identitiesV1.module.css b/styles/components/identitiesV1.module.css
@@ -1,15 +1,33 @@
+.galeryContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 32px;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  margin-top: 2rem;
+  max-width: 50rem;
+  margin: auto;
+}
+
 .imageGallery {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
   cursor: pointer;
-  margin: 1rem;
-  height: 160px;
-  margin-bottom: 3rem;
   position: relative;
+  border-radius: 20px;
+  background: var(--background-light);
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+  padding: 24px;
 }
 
 .expiryWarning {
   position: absolute;
-  top: -10px;
-  right: -10px;
+  top: 42px;
+  right: 42px;
 }
 
 .containerIdentity {
@@ -46,3 +64,11 @@
     gap: 3rem;
   }
 }
+
+@media (max-width: 768px) {
+  .expiryWarning {
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+}
diff --git a/styles/globals.css b/styles/globals.css
@@ -24,6 +24,7 @@
   --secondary300: #eae0d5;
   --tertiary: #bf9e7b;
   --background: #fff9f0;
+  --background-light: #fffcf8;
   --nimiq-ease: cubic-bezier(0.25, 0, 0, 1);
 }
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,6 +10,9 @@ module.exports = {
         background: "#FFF9F0",
       },
     },
+    fontFamily: {
+      quickZap: ["QuickZap"],
+    },
   },
   plugins: [],
 };