Merge pull request #1004 from covenantebube/fix-940

Fix: Refont the domain idendity card
lfglabs-dev · Jan 28, 2025 · 5c11c45 · 5c11c45
2 parents e73430f + a058f0b
commit 5c11c45
Show file tree

Hide file tree

Showing 18 changed files with 173 additions and 733 deletions.
diff --git a/components/UI/iconsComponents/icons/copyIcon.tsx b/components/UI/iconsComponents/icons/copyIcon.tsx
@@ -5,18 +5,19 @@ const CopyIcon: FunctionComponent<IconProps> = ({ color, width }) => {
     <svg
       width={width}
       height={width}
-      viewBox="0 0 21 21"
+      viewBox="0 0 14 14"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M13.8327 11.25V14.75C13.8327 17.6667 12.666 18.8333 9.74935 18.8333H6.24935C3.33268 18.8333 2.16602 17.6667 2.16602 14.75V11.25C2.16602 8.33334 3.33268 7.16667 6.24935 7.16667H9.74935C12.666 7.16667 13.8327 8.33334 13.8327 11.25Z"
-        fill={color}
-      />
-      <path
-        d="M14.7508 2.16667H11.2508C8.68155 2.16667 7.4766 3.07841 7.22557 5.28252C7.17305 5.74363 7.55494 6.125 8.01903 6.125H9.75078C13.2508 6.125 14.8758 7.75 14.8758 11.25V12.9818C14.8758 13.4458 15.2572 13.8277 15.7183 13.7752C17.9224 13.5242 18.8341 12.3192 18.8341 9.75001V6.25001C18.8341 3.33334 17.6674 2.16667 14.7508 2.16667Z"
-        fill={color}
-      />
+      <g id="CopyIcon">
+        <path
+          id="Union"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.01703 11.0889V4.61101C3.06656 3.93747 3.60539 2.57851 5.36451 2.53097C7.12363 2.48342 8.98972 2.51116 9.70288 2.53097C9.9406 2.54087 10.4279 2.56663 10.4755 2.5904C10.5349 2.62011 10 1.31266 8.66286 1.31266H4.74049C3.76981 1.30275 1.82844 1.75244 1.82844 3.63042V9.42482C1.81853 9.74178 2.04238 10.5183 3.01703 11.0889ZM4.16732 8.64424V5.67275C4.10789 4.97941 5.06353 3.59271 6.56116 3.59271H10.4075C11.8112 3.5927 12.1606 3.93741 12.1606 5.67275V10.754C12.1705 11.3978 11.7922 12.6855 10.1995 12.6855H5.95023C5.33613 12.7152 4.10791 12.3883 4.10791 10.8431C4.10791 9.29797 4.14752 8.73339 4.16732 8.64424Z"
+          fill={color}
+        />
+      </g>
     </svg>
   );
 };

diff --git a/components/UI/iconsComponents/icons/verifiedIcon.tsx b/components/UI/iconsComponents/icons/verifiedIcon.tsx
diff --git a/components/identities/actions/socialmediaActions.tsx b/components/identities/actions/socialmediaActions.tsx
@@ -18,9 +18,9 @@ const SocialMediaActions: FunctionComponent<SocialMediaActionsProps> = ({
   identity,
 }) => {
   return (
-    <div className=" lg:mt-6 mt-2 flex lg:justify-start justify-center lg:items-start items-center">
+    <div className=" lg:mt-6 mt-2 flex lg:justify-start justify-center lg:items-start items-center ">
       <div className={styles.socialmediaActions}>
-        <div className="flex flex-row gap-3">
+        <div className="flex flex-row gap-3 pb-4">
           <ClickableTwitterIcon
             isOwner={isOwner}
             width="24"

diff --git a/components/identities/identityCard.tsx b/components/identities/identityCard.tsx
@@ -45,8 +45,8 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
-        <div className="lg:mt-10 flex items-center lg:justify-between justify-center gap-3 sm:gap-5 my-2 flex-wrap lg:flex-row">
-          <div className="my-2">
+        <div className="lg:mt-10 flex items-center lg:justify-between justify-center sm:text-center gap-3 sm:gap-5 my-2 flex-wrap lg:flex-row sm:flex-col">
+          <div className="my-2 text-center">
             <div
               className={styles.pfpSection}
               onMouseEnter={handleMouseEnter}
@@ -114,55 +114,85 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
               <Skeleton className="mt-3" variant="rounded" height={58} />
             </div>
           ) : null}
-          <div>
-            <div className="flex flex-row items-center justify-center gap-5 mb-5">
-              <div className="flex flex-col">
-                {identity?.targetAddress ? (
-                  <>
-                    {identity?.domain ? (
-                      <div className={styles.addressBar}>
-                        <h2>{minifyAddress(identity.targetAddress)}</h2>
-                        <CopyContent
-                          value={identity?.targetAddress}
-                          className="cursor-pointer ml-3"
-                        />
-                      </div>
-                    ) : null}
-                    <div className="flex flex-row items-center justify-center">
-                      <div className={styles.starknetAddr}>
-                        <h1 className={styles.domain}>
-                          {responsiveDomainOrId}
-                        </h1>
-                      </div>
-                    </div>
-                  </>
-                ) : null}
+          <div className="">
+            <div className="lg:ml-8 sm:ml-0 sm:justify-center">
+              <div className="flex flex-row items-center justify-center gap-5 mb-5">
+                <div className="flex flex-col mt-4">
+                  {isMobile ? (
+                    <>
+                      {identity?.targetAddress ? (
+                        <>
+                          <div className="flex flex-row items-center justify-center">
+                            <div className={styles.starknetAddr}>
+                              <h1 className={styles.domain}>
+                                {responsiveDomainOrId}
+                              </h1>
+                            </div>
+                          </div>
+                          {identity?.domain ? (
+                            <div className={styles.addressBar}>
+                              <h2>{minifyAddress(identity.targetAddress)}</h2>
+                              <CopyContent
+                                value={identity?.targetAddress}
+                                className="cursor-pointer ml-3"
+                              />
+                            </div>
+                          ) : null}
+                        </>
+                      ) : null}
+                    </>
+                  ) : (
+                    <>
+                      {identity?.targetAddress ? (
+                        <>
+                          {identity?.domain ? (
+                            <div className={styles.addressBar}>
+                              <h2>{minifyAddress(identity.targetAddress)}</h2>
+                              <CopyContent
+                                value={identity?.targetAddress}
+                                className="cursor-pointer ml-3"
+                              />
+                            </div>
+                          ) : null}
+                          <div className="flex flex-row items-center justify-center">
+                            <div className={styles.starknetAddr}>
+                              <h1 className={styles.domain}>
+                                {responsiveDomainOrId}
+                              </h1>
+                            </div>
+                          </div>
+                        </>
+                      ) : null}
+                    </>
+                  )}
+                </div>
               </div>
+              <AddEvmAction identity={identity} isOwner={isOwner} />
+              <SocialMediaActions
+                identity={identity}
+                isOwner={isOwner}
+                tokenId={tokenId}
+              />
             </div>
-            <AddEvmAction identity={identity} isOwner={isOwner} />
-            <SocialMediaActions
-              identity={identity}
-              isOwner={isOwner}
-              tokenId={tokenId}
-            />
+
             <img
               alt="leaf"
-              src="/leaves/new/leavesGroup01.svg"
+              src="/leaves/new/leaf02.webp"
               className={styles.lg1}
             />
             <img
               alt="leaf"
-              src="/leaves/new/leavesGroup02.svg"
+              src="/leaves/new/leaf01.webp"
               className={styles.lg2}
             />
             <img
               alt="logo"
-              src="/visuals/detouredLogo.svg"
+              src="/visuals/detoured_logo.svg"
               className={styles.detouredLogo}
             />
             <img
               alt="logo"
-              src="/visuals/detouredTextLogo.svg"
+              src="/visuals/text.svg"
               className={styles.detouredTextLogo}
             />
           </div>
@@ -177,7 +207,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <rect width="380" height="6" rx="3" fill="#EAE0D5" />
+          <rect width="380" height="6" rx="3" fill="#e2dfde" />
         </svg>
       </div>
     </div>

diff --git a/public/leaves/new/leaf01.webp b/public/leaves/new/leaf01.webp
diff --git a/public/leaves/new/leaf02.webp b/public/leaves/new/leaf02.webp
diff --git a/public/visuals/coconut.svg b/public/visuals/coconut.svg
diff --git a/public/visuals/coconutTree1.webp b/public/visuals/coconutTree1.webp
diff --git a/public/visuals/coconutTree2.webp b/public/visuals/coconutTree2.webp
diff --git a/public/visuals/detoured_logo.svg b/public/visuals/detoured_logo.svg
diff --git a/public/visuals/hotAirBalloon.svg b/public/visuals/hotAirBalloon.svg