Merge pull request #1006 from addegbenga/fix-946

Fix #946: Refont of identity card button
lfglabs-dev · Jan 27, 2025 · 753addc · 753addc
2 parents 9e018ba + c721300
commit 753addc
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 46 deletions.
diff --git a/components/UI/iconsComponents/clickableAction.tsx b/components/UI/iconsComponents/clickableAction.tsx
@@ -20,11 +20,12 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
 }) => {
   return (
     <div
-      className={`${
-        style === "secondary"
-          ? styles.clickableActionSecondary
-          : styles.clickableActionPrimary
-      }
+      className={`
+        ${
+          style === "secondary"
+            ? styles.clickableActionSecondary
+            : styles.clickableActionPrimary
+        }
         ${width === "auto" ? styles.clickableActionAutoWidth : ""}`}
       onClick={onClick}
     >

diff --git a/components/identities/actions/clickable/clickableTwitterIcon.tsx b/components/identities/actions/clickable/clickableTwitterIcon.tsx
@@ -82,4 +82,4 @@ const ClickableTwitterIcon: FunctionComponent<ClickableTwitterIconProps> = ({
   ) : null;
 };
 
-export default ClickableTwitterIcon;
+export default ClickableTwitterIcon;
diff --git a/components/identities/actions/identityActions.tsx b/components/identities/actions/identityActions.tsx
@@ -11,7 +11,6 @@ import { timestampToReadableDate } from "../../../utils/dateService";
 import { utils } from "starknetid.js";
 import theme from "../../../styles/theme";
 import MainIcon from "../../UI/iconsComponents/icons/mainIcon";
-import ChangeIcon from "../../UI/iconsComponents/icons/changeIcon";
 import TransferIcon from "../../UI/iconsComponents/icons/transferIcon";
 import PlusIcon from "../../UI/iconsComponents/icons/plusIcon";
 import TxConfirmationModal from "../../UI/txConfirmationModal";
@@ -27,6 +26,7 @@ import { Identity } from "../../../utils/apiWrappers/identity";
 import identityChangeCalls from "../../../utils/callData/identityChangeCalls";
 import PyramidIcon from "../../UI/iconsComponents/icons/pyramidIcon";
 import { StarknetIdJsContext } from "@/context/StarknetIdJsProvider";
+import RenewalIcon from "@/components/UI/iconsComponents/icons/renewalIcon";
 
 type IdentityActionsProps = {
   identity?: Identity;
@@ -247,15 +247,6 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
           )}
           {identity && isOwner && address && (
             <div className={styles.identityActions}>
-              {callDataEncodedDomain[0] === "1" && !isAutoRenewalEnabled ? (
-                <ClickableAction
-                  title="ENABLE SUBSCRIPTION"
-                  description={nextAutoRenew}
-                  style="primary"
-                  icon={<div className={styles.renewalIcon}>ON</div>}
-                  onClick={() => router.push("/subscription")}
-                />
-              ) : null}
               {callDataEncodedDomain[0] === "1" ? (
                 <ClickableAction
                   title="RENEW YOUR DOMAIN"
@@ -264,30 +255,20 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
                     identity?.domainExpiry ?? 0
                   )}`}
                   icon={
-                    <ChangeIcon width="25" color={theme.palette.primary.main} />
+                    <RenewalIcon
+                      width="18"
+                      color={theme.palette.primary.main}
+                    />
                   }
                   onClick={() => router.push("/renewal")}
                 />
               ) : null}
-              {!isMainDomain && (
-                <ClickableAction
-                  title="Set as main domain"
-                  description="Set this identity as your main id"
-                  icon={
-                    <MainIcon
-                      width="23"
-                      firstColor={theme.palette.secondary.main}
-                      secondColor={theme.palette.secondary.main}
-                    />
-                  }
-                  onClick={() => setMainId()}
-                />
-              )}
+
               <ClickableAction
                 title="CHANGE DOMAIN TARGET"
                 description="Change target address"
                 icon={
-                  <SignsIcon width="25" color={theme.palette.secondary.main} />
+                  <SignsIcon width="23" color={theme.palette.secondary.main} />
                 }
                 onClick={() => setIsAddressFormOpen(true)}
               />
@@ -299,7 +280,7 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
                     description="Transfer your identity to another wallet"
                     icon={
                       <TransferIcon
-                        width="25"
+                        width="20"
                         color={theme.palette.secondary.main}
                       />
                     }
@@ -310,12 +291,36 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
                     description="Create a new subdomain"
                     icon={
                       <PlusIcon
-                        width="25"
+                        width="18"
                         color={theme.palette.secondary.main}
                       />
                     }
                     onClick={() => setIsSubdomainFormOpen(true)}
                   />
+                  {!isMainDomain && (
+                    <ClickableAction
+                      title="Set as main domain"
+                      description="Set this identity as your main id"
+                      icon={
+                        <MainIcon
+                          width="21"
+                          firstColor={theme.palette.secondary.main}
+                          secondColor={theme.palette.secondary.main}
+                        />
+                      }
+                      onClick={() => setMainId()}
+                    />
+                  )}
+
+                  {callDataEncodedDomain[0] === "1" && !isAutoRenewalEnabled ? (
+                    <ClickableAction
+                      title="ENABLE SUBSCRIPTION"
+                      description={nextAutoRenew}
+                      style="primary"
+                      icon={<div className={styles.renewalIcon}>ON</div>}
+                      onClick={() => router.push("/subscription")}
+                    />
+                  ) : null}
                   {callDataEncodedDomain[0] === "1" && isAutoRenewalEnabled ? (
                     <ClickableAction
                       title="DISABLE SUBSCRIPTION"

diff --git a/pages/identities/[tokenId].tsx b/pages/identities/[tokenId].tsx
@@ -184,4 +184,4 @@ const TokenIdPage: NextPage = () => {
   );
 };
 
-export default TokenIdPage;
+export default TokenIdPage;
diff --git a/public/visuals/detouredTextLogo.svg b/public/visuals/detouredTextLogo.svg
diff --git a/styles/components/icons.module.css b/styles/components/icons.module.css
@@ -49,7 +49,7 @@
 
 .verifiedIcon {
   position: absolute;
-  top: -0.3rem;
+  top: -0.4rem;
   right: -0.3rem;
 }
 

diff --git a/styles/components/identitiesV1.module.css b/styles/components/identitiesV1.module.css
@@ -71,13 +71,30 @@
   padding: 1rem;
   flex-direction: column;
   width: 100%;
+  align-items: center;
+}
+
+.identityBoxWrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 2.5rem;
+  gap: 1rem;
+  justify-content: center;
+}
+
+@media (min-width: 1124px) {
+  .identityBoxWrapper {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }
 
 @media (min-width: 1124px) {
   .identityBox {
     flex-direction: row;
     justify-content: center;
-    gap: 3rem;
+    gap: 2rem;
   }
 }
 

diff --git a/styles/components/identityMenu.module.css b/styles/components/identityMenu.module.css
@@ -16,13 +16,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  padding: 8px 32px;
+  padding: 10px;
   gap: 8px;
   width: 358px;
   background: radial-gradient(
     382.53% 14823.28% at 46.39% 50%,
     #fff9f0 0%,
-    #dccab8 100%
+    /* #dccab8 100% */
   );
 
   /* Secondary/700 */
@@ -32,7 +32,7 @@
 
   /* Button */
   box-shadow: 0px 6px 80px rgba(191, 158, 123, 0.07);
-  border-radius: 20px;
+  border-radius: 12px;
 
   /* Inside auto layout */
   flex: none;
@@ -68,7 +68,7 @@
   font-family: "QuickZap";
   font-style: normal;
   font-weight: 400;
-  font-size: 15px;
+  font-size: 16px;
   line-height: 24px;
   text-align: left;
   /* identical to box height, or 150% */
@@ -84,7 +84,7 @@
 }
 
 .clickableActionDescription {
-  font-size: 11px;
+  font-size: 12px;
   text-align: left;
 }
 
@@ -108,12 +108,12 @@
   align-items: center;
   justify-content: center;
   border-radius: 25%;
-  width: 35px;
-  height: 35px;
+  width: 40px;
+  height: 40px;
 }
 
 .clickableIconSecondary {
-  background-color: var(--secondary300);
+  background-color: var(--light-tertiary);
 }
 
 .renewalIcon {
-Original file line number
+Diff line change
@@ Expand Up / @@ -184,4 +184,4 @@ const TokenIdPage: NextPage = () => { @@
       );
     };
-    export default TokenIdPage;
+    export default TokenIdPage;