fixed icon issues, fixed mid screen responsiveness issues, added whit…

…e background to "add identity" button, fixed nav height issues.
lfglabs-dev · Jan 30, 2025 · 771155b · 771155b
1 parent a2c16c0
commit 771155b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/components/UI/iconsComponents/icons/renewalIcon.tsx b/components/UI/iconsComponents/icons/renewalIcon.tsx
@@ -1,15 +1,27 @@
-import React, { FunctionComponent } from "react";
+import React, {FunctionComponent} from "react";
 
-const RenewalIcon: FunctionComponent<IconProps> = ({ color, width }) => {
-  return (
-    <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <ellipse cx="17.137" cy="15.0669" rx="2.57449" ry="2.33056" fill="#0C8654"/>
-    <path d="M19.7089 6.00473V6.28565C19.7089 6.62899 19.3034 6.90991 18.8078 6.90991H2.58857C2.09298 6.90991 1.6875 6.62899 1.6875 6.28565V5.99849C1.6875 4.56894 3.35448 3.41406 5.41793 3.41406H15.9695C18.0329 3.41406 19.7089 4.57518 19.7089 6.00473Z" fill="#0C8654"/>
-    <path d="M1.6875 8.88911V12.8909C1.6875 14.7386 3.35448 16.2312 5.41793 16.2312H11.0586C11.5812 16.2312 12.0318 15.8358 11.9867 15.3679C11.8606 14.1334 12.3021 12.7941 13.5276 11.7291C14.0322 11.2854 14.6539 10.9465 15.3297 10.7529C16.456 10.4301 17.5463 10.4705 18.5105 10.7609C19.0962 10.9384 19.7089 10.5592 19.7089 10.0025V8.88104C19.7089 8.43729 19.3034 8.07422 18.8078 8.07422H2.58857C2.09298 8.08229 1.6875 8.44536 1.6875 8.88911ZM7.09392 13.5283H5.29178C4.92234 13.5283 4.61598 13.254 4.61598 12.9232C4.61598 12.5924 4.92234 12.3181 5.29178 12.3181H7.09392C7.46336 12.3181 7.76972 12.5924 7.76972 12.9232C7.76972 13.254 7.46336 13.5283 7.09392 13.5283Z" fill="#0C8654"/>
-    <path d="M16.71 11.5703C14.8135 11.5703 13.2773 12.9609 13.2773 14.6777C13.2773 15.2604 13.4576 15.8119 13.7751 16.278C14.3672 17.1792 15.4571 17.7851 16.71 17.7851C17.9629 17.7851 19.0528 17.1792 19.6449 16.278C19.9624 15.8119 20.1426 15.2604 20.1426 14.6777C20.1426 12.9609 18.6065 11.5703 16.71 11.5703ZM18.4864 14.3437L16.6585 15.8741C16.5384 15.9751 16.3753 16.0295 16.2208 16.0295C16.0578 16.0295 15.8947 15.9751 15.766 15.8585L14.9164 15.0895C14.6676 14.8642 14.6676 14.4913 14.9164 14.266C15.1653 14.0407 15.5772 14.0407 15.8261 14.266L16.238 14.6389L17.6111 13.4891C17.8685 13.2716 18.2804 13.2872 18.5207 13.5202C18.761 13.7533 18.7438 14.1184 18.4864 14.3437Z" fill="#0C8654"/>
-    <path d="M16.0143 16.6933C15.7049 16.3283 14.7723 15.5553 14.3446 15.2145C14.088 15.0071 14.3363 14.5244 14.8486 14.8644C15.2585 15.1364 15.8747 15.6594 16.1316 15.887C16.3732 14.8493 17.877 13.109 18.1283 12.8765C18.3796 12.6439 18.3796 12.6439 18.6351 12.7564C18.8395 12.8464 18.7231 13.024 18.6393 13.1015C17.2612 14.7255 16.6426 16.112 16.6468 16.457C16.6509 16.8021 16.401 17.1496 16.0143 16.6933Z" fill="white"/>
-    </svg>
-  );
+const RenewalIcon: FunctionComponent<IconProps> = ({color, width}) => {
+   return (
+      <svg width={width || "20"} height={width} viewBox="0 0 21 20" fill={color} xmlns="http://www.w3.org/2000/svg">
+         <ellipse cx="17.137" cy="15.0669" rx="2.57449" ry="2.33056" fill="#0C8654" />
+         <path
+            d="M19.7089 6.00473V6.28565C19.7089 6.62899 19.3034 6.90991 18.8078 6.90991H2.58857C2.09298 6.90991 1.6875 6.62899 1.6875 6.28565V5.99849C1.6875 4.56894 3.35448 3.41406 5.41793 3.41406H15.9695C18.0329 3.41406 19.7089 4.57518 19.7089 6.00473Z"
+            fill="#0C8654"
+         />
+         <path
+            d="M1.6875 8.88911V12.8909C1.6875 14.7386 3.35448 16.2312 5.41793 16.2312H11.0586C11.5812 16.2312 12.0318 15.8358 11.9867 15.3679C11.8606 14.1334 12.3021 12.7941 13.5276 11.7291C14.0322 11.2854 14.6539 10.9465 15.3297 10.7529C16.456 10.4301 17.5463 10.4705 18.5105 10.7609C19.0962 10.9384 19.7089 10.5592 19.7089 10.0025V8.88104C19.7089 8.43729 19.3034 8.07422 18.8078 8.07422H2.58857C2.09298 8.08229 1.6875 8.44536 1.6875 8.88911ZM7.09392 13.5283H5.29178C4.92234 13.5283 4.61598 13.254 4.61598 12.9232C4.61598 12.5924 4.92234 12.3181 5.29178 12.3181H7.09392C7.46336 12.3181 7.76972 12.5924 7.76972 12.9232C7.76972 13.254 7.46336 13.5283 7.09392 13.5283Z"
+            fill="#0C8654"
+         />
+         <path
+            d="M16.71 11.5703C14.8135 11.5703 13.2773 12.9609 13.2773 14.6777C13.2773 15.2604 13.4576 15.8119 13.7751 16.278C14.3672 17.1792 15.4571 17.7851 16.71 17.7851C17.9629 17.7851 19.0528 17.1792 19.6449 16.278C19.9624 15.8119 20.1426 15.2604 20.1426 14.6777C20.1426 12.9609 18.6065 11.5703 16.71 11.5703ZM18.4864 14.3437L16.6585 15.8741C16.5384 15.9751 16.3753 16.0295 16.2208 16.0295C16.0578 16.0295 15.8947 15.9751 15.766 15.8585L14.9164 15.0895C14.6676 14.8642 14.6676 14.4913 14.9164 14.266C15.1653 14.0407 15.5772 14.0407 15.8261 14.266L16.238 14.6389L17.6111 13.4891C17.8685 13.2716 18.2804 13.2872 18.5207 13.5202C18.761 13.7533 18.7438 14.1184 18.4864 14.3437Z"
+            fill="#0C8654"
+         />
+         <path
+            d="M16.0143 16.6933C15.7049 16.3283 14.7723 15.5553 14.3446 15.2145C14.088 15.0071 14.3363 14.5244 14.8486 14.8644C15.2585 15.1364 15.8747 15.6594 16.1316 15.887C16.3732 14.8493 17.877 13.109 18.1283 12.8765C18.3796 12.6439 18.3796 12.6439 18.6351 12.7564C18.8395 12.8464 18.7231 13.024 18.6393 13.1015C17.2612 14.7255 16.6426 16.112 16.6468 16.457C16.6509 16.8021 16.401 17.1496 16.0143 16.6933Z"
+            fill="white"
+         />
+      </svg>
+   );
 };
 
 export default RenewalIcon;
diff --git a/components/identities/availableIdentities.tsx b/components/identities/availableIdentities.tsx
@@ -169,12 +169,17 @@ const AvailableIdentities = ({tokenId}: {tokenId: string}) => {
       <>
          <div className="">
             {isIdentityADomain === undefined ? (
-               <IdentitiesSkeleton />
+               <div className="">
+                  {" "}
+                  <IdentitiesSkeleton />
+               </div>
             ) : !isUpdatingPp ? (
                <div className={homeStyles.wrapperScreen}>
-                  <div className={` mb-6 md:min-h-[80vh] flex flex-col sm:flex-col-reverse xl:flex-row gap-3 lg:gap-[24px] justify-center items-center `}>
+                  <div className={` mb-6 md:min-h-[80vh] flex flex-col sm:flex-col-reverse xl:flex-row gap-3 lg:gap-[24px] justify-center items-center  `}>
                      <div
-                        className={`${"lg:ml-28 border max-w-[267px]"} m-auto  bg-[#FFFFFF] w-[90%] sm:w-[80%] lg:w-[267px]  shadow-sm rounded-2xl h-[319px] md:h-[500px] xl:h-screen 2xl:h-[600px]  md:p-5 relative text-center border border-[#4545451A] flex flex-col items-center justify-between `}
+                        className={`${"xl:ml-28 border max-w-[267px]"} m-auto w-[90%] sm:w-[80%] lg:w-[267px]  shadow-sm rounded-2xl h-[319px] md:h-[500px] lg:h-[700px] ${
+                           styles.SIDENAV
+                        } md:p-5 relative flex flex-col items-center justify-between `}
                      >
                         <div className="h-full md:min-h-[100%] md:w-full overflow-y-auto ">
                            {ownedIdentities.map((domain, index) => (
@@ -190,13 +195,12 @@ const AvailableIdentities = ({tokenId}: {tokenId: string}) => {
                            ))}
                         </div>
                         <button
-                           className=" mt-[-1rem] w-full justify-center text-center items-center font-quickZap font-normal flex gap-2 "
+                           className=" mt-[-1.3rem] w-full justify-center text-center items-center font-quickZap font-normal min-h-[40px] py-2 flex gap-2 bg-white rounded-b-2xl"
                            onClick={address ? () => mint() : () => setShowWalletConnectModal(true)}
                         >
                            <FaPlus />
                            ADD IDENTITIES
                         </button>
-                        <br />
                      </div>
                      <div className={`${styles.containerIdentity}  ${!isIdentityADomain ? "flex-grow" : "flex-grow"}`}>
                         <>

diff --git a/components/identities/skeletons/identitiesSkeleton.tsx b/components/identities/skeletons/identitiesSkeleton.tsx
@@ -4,7 +4,7 @@ import styles from "../../../styles/components/identitiesV1.module.css";
 
 const IdentitiesSkeleton: FunctionComponent = () => {
    return (
-      <div className="pt-20">
+      <div className="">
          <div className={styles.identitiesSkeleton}>
             <Skeleton variant="rounded" width={300} height={546} className=""/>
             <Skeleton variant="rounded" width={598} height={346} className="mt-20 hidden md:flex"/>

diff --git a/styles/components/identitiesV1.module.css b/styles/components/identitiesV1.module.css
@@ -166,3 +166,15 @@
    align-items: center;
    margin-top: 13vh;
 }
+
+.SIDENAV {
+   background-color: white;
+   border: 1px solid #4545451a;
+   text-align: center;
+}
+
+@media (min-width: 1310px) {
+   .SIDENAV {
+      height: calc(80vh - 6rem);
+   }
+}