fix: Main page UI fixes (#477)

Co-authored-by: Taras Oliynyk <[email protected]>
Consensys · Dec 19, 2023 · c4245d1 · c4245d1
1 parent 760ff23
commit c4245d1
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 36 deletions.
diff --git a/explorer/src/assets/locales/en/en.json b/explorer/src/assets/locales/en/en.json
@@ -43,10 +43,9 @@
     }
   },
   "home": {
-    "title": "Boost your Dapps with Verax Explorer",
-    "subtitle": "The Ultimate Public Attestation Registry",
+    "title": "Verax is an open source, public registry for storing attestations",
     "issuers": {
-      "title": "Explore Issuers"
+      "title": "Explore the Verax Ecosystem"
     },
     "info": {
       "issueYourAttestation": "Want to issue your own attestation?",

diff --git a/explorer/src/components/Buttons/index.tsx b/explorer/src/components/Buttons/index.tsx
@@ -10,16 +10,17 @@ export const Button: React.FC<IButtonsProps> = ({
   iconLeft,
   iconRight,
   height = "h-12",
+  isSmall = false,
 }) => {
   return (
     <button
       onClick={handler}
       disabled={disabled}
-      className={`${height} ${
+      className={`${isSmall ? "h-11 text-sm button-small" : height} ${
         buttonType === EButtonType.TRANSPARENT
           ? "px-0 py-0 rounded-none border-b border-transparent hover:border-blackDefault"
           : "px-4 py-3"
-      } flex justify-center items-center gap-2 rounded-md disabled:opacity-40 font-semibold 
+      } flex justify-center items-center gap-2 rounded-md disabled:opacity-40 font-semibold transition
       ${getButtonExtraClassName(buttonType)}`}
     >
       {iconLeft && iconLeft}

diff --git a/explorer/src/components/Buttons/interface.ts b/explorer/src/components/Buttons/interface.ts
@@ -8,4 +8,5 @@ export interface IButtonsProps {
   iconLeft?: JSX.Element;
   iconRight?: JSX.Element;
   height?: string;
+  isSmall?: boolean;
 }
diff --git a/explorer/src/index.css b/explorer/src/index.css
@@ -9,6 +9,7 @@
   :root {
     --white-default: #FEFEFE;
     --black-default: #0C0C11;
+    --jumbotron: #CFDE6A;
 
     --surface-primary: #FEFEFE;
     --surface-secondary: #F4F5F9;
@@ -49,9 +50,9 @@
     --button-primary-black-text: #FEFEFE;
     --button-primary-black-hover: #3D3D50;
 
-    --button-primary-background: #C4FF1C;
+    --button-primary-background: #CFDE6A;
     --button-primary-text: #0D0D12;
-    --button-primary-hover: #AFED00;
+    --button-primary-hover: #BAC66A;
 
     --button-secondary-text: #0D0D12;
     --button-secondary-hover: #6E7491;
@@ -119,6 +120,13 @@
 }
 
 @layer components {
+  .button-small {
+    svg {
+      width: 1rem;
+      height: auto;
+    }
+  }
+
   .button-primary-white {
     @apply text-button-primaryWhite-text bg-button-primaryWhite-background hover:bg-button-primaryWhite-hover;
   }

diff --git a/explorer/src/pages/Home/components/Info/index.tsx b/explorer/src/pages/Home/components/Info/index.tsx
@@ -11,7 +11,7 @@ export const Info: React.FC = () => {
       {infoData.map((info) => (
         <div
           key={info.title}
-          className={`flex flex-col items-center justify-center gap-6 px-10 h-[23.4375rem] lg:h-[29.5625rem] rounded-3xl ${info.additionalClass}`}
+          className={`flex flex-col items-center justify-center gap-6 px-10 h-[18.75rem] lg:h-[23.375rem] rounded-3xl text-center ${info.additionalClass}`}
         >
           {info.icon}
           <div className="text-xl md:text-2xl font-semibold">{info.title}</div>

diff --git a/explorer/src/pages/Home/components/Issuer/index.tsx b/explorer/src/pages/Home/components/Issuer/index.tsx
@@ -1,8 +1,12 @@
-import { useLocation, useNavigate } from "react-router-dom";
+import { t } from "i18next";
+import { ArrowUpRight, ChevronRight } from "lucide-react";
+import { generatePath, useLocation, useNavigate } from "react-router-dom";
 
+import { Button } from "@/components/Buttons";
+import { EButtonType } from "@/components/Buttons/enum";
 import { Chips } from "@/components/Chips";
 import { useNetworkContext } from "@/providers/network-provider/context";
-import { CHAIN_ID_ROUTE, toIssuerById } from "@/routes/constants";
+import { APP_ROUTES } from "@/routes/constants";
 
 import { IIssuerProps } from "./interface";
 
@@ -18,10 +22,7 @@ export const Issuer: React.FC<IIssuerProps> = ({ issuer }) => {
   return (
     <div
       key={issuer.name}
-      className="group flex flex-col gap-4 border border-border-card rounded-xl p-4 md:p-6 cursor-pointer hover:bg-surface-secondary"
-      onClick={() =>
-        navigate(toIssuerById(issuer.address).replace(CHAIN_ID_ROUTE, network), { state: { from: location.pathname } })
-      }
+      className="group flex flex-col gap-4 border border-border-card rounded-xl p-4 md:p-6 hover:bg-surface-secondary transition md:min-h-[27.8125rem]"
     >
       <div className="flex items-center gap-3 text-xl md:text-2xl font-semibold text-blackDefault">
         <div className="w-[2.5rem] h-[2.5rem] md:w-[3rem] md:h-[3rem] flex items-center justify-center">
@@ -46,6 +47,28 @@ export const Issuer: React.FC<IIssuerProps> = ({ issuer }) => {
           <div className="text-xs font-normal text-text-darkGrey">Schemas</div>
         </div>
       </div> */}
+      <div className="flex flex-1 flex-col lg:flex-row lg:items-end gap-4 justify-end lg:justify-start">
+        <Button
+          isSmall
+          name={t("common.actions.details")}
+          handler={() =>
+            navigate(generatePath(APP_ROUTES.ISSUER_BY_ID, { chainId: network, id: issuer.address }), {
+              state: { from: location.pathname },
+            })
+          }
+          buttonType={EButtonType.OUTLINED}
+          iconRight={<ChevronRight />}
+        />
+        {issuer.CTALink && (
+          <Button
+            isSmall
+            name={issuer.CTATitle}
+            handler={() => window.open(issuer.CTALink, "_blank")}
+            buttonType={EButtonType.TRANSPARENT}
+            iconRight={<ArrowUpRight />}
+          />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/explorer/src/pages/Home/components/Issuers/index.tsx b/explorer/src/pages/Home/components/Issuers/index.tsx
@@ -7,7 +7,7 @@ export const Issuers: React.FC = () => {
   return (
     <div className="flex flex-col gap-10 md:gap-12">
       <h2 className="text-center text-2xl md:text-[2rem] font-semibold text-blackDefault">{t("home.issuers.title")}</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
         {issuersData.map((issuer) => (
           <Issuer issuer={issuer} key={issuer.address} />
         ))}

diff --git a/explorer/src/pages/Home/components/TitleSearch/index.tsx b/explorer/src/pages/Home/components/TitleSearch/index.tsx
@@ -7,22 +7,15 @@ import { EButtonType } from "@/components/Buttons/enum";
 import { EMPTY_STRING } from "@/constants";
 import { keyboard } from "@/constants/keyboard";
 import { useHandleSearch } from "@/hooks/useHandleSearch";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 export const TitleSearch: React.FC = () => {
-  const { sm } = useWindowDimensions();
-
   const [searchQuery, setSearchQuery] = useState<string>(EMPTY_STRING);
   const handleSearch = useHandleSearch();
 
   return (
-    <div className="flex flex-col items-center justify-center h-[24.125rem] lg:h-[23rem] md:h-[22.375rem] bg-surface-lime rounded-[1.375rem] lg:rounded-[2.25rem] md:rounded-[2rem] mt-5 md:mt-6 gap-10 px-4 md:px-10">
-      <h1 className="text-center font-medium md:font-semibold text-[2rem] md:text-[2.5rem] lg:text-[2.75rem] lg:leading-[2.97rem] md:leading-[2.7rem] leading-[2.25rem]">
-        <div>
-          {t("home.title")}
-          {!sm && ":"}
-        </div>
-        {!sm && <div>{t("home.subtitle")}</div>}
+    <div className="flex flex-col items-center justify-center h-[24.125rem] lg:h-[23rem] md:h-[22.375rem] bg-jumbotron rounded-[1.375rem] lg:rounded-[2.25rem] md:rounded-[2rem] mt-5 md:mt-6 gap-10 px-4 md:px-10">
+      <h1 className="text-center font-medium md:font-semibold text-[2rem] md:text-[2.5rem] lg:text-[2.75rem] lg:leading-[2.97rem] md:leading-[2.7rem] leading-[2.25rem] max-w-[52.5rem]">
+        {t("home.title")}
       </h1>
       <div className="flex flex-col md:flex-row w-full gap-2 max-w-[57.6875rem]">
         <input

diff --git a/explorer/src/pages/Home/data.tsx b/explorer/src/pages/Home/data.tsx
@@ -19,7 +19,7 @@ export const issuersData: IIssuer[] = [
       "Connect your wallet to LINEA to view and generate your Trusta's Sybil Score attestation. Your humanity is verified based only on your on-chain data, without needing approval from a central authority, and without any request for your personal info.",
     CTALink:
       "https://trustgo.trustalabs.ai/etrusta/0x085ed975a8b6b860de3c2b871da60a3f9f48a5b8/lineaverax/h?f=linea&chainId=324",
-    CTATitle: "Learn more",
+    CTATitle: "Go To Trusta Labs",
     address: "0x9e728394E55e6535BF66f913e911Ae1f572D8db0",
   },
   {
@@ -29,7 +29,7 @@ export const issuersData: IIssuer[] = [
     description:
       "Gitcoin Passport is the best, easy-to-use identity and Sybil defense solution in web3. Top web3 projects protect what matters with Gitcoin Passport.",
     CTALink: "https://passport.gitcoin.co/#/dashboard/verax",
-    CTATitle: "Learn more",
+    CTATitle: "Get your passport",
     address: "0x96DB2c6D93A8a12089f7a6EdA5464e967308AdEd",
   },
   {
@@ -39,7 +39,7 @@ export const issuersData: IIssuer[] = [
     description:
       "PADO is a zkAttestation protocol, dedicated to bringing Internet data into web3 smart contracts, expanding the capabilities of smart contracts, and enabling the monetization of personal data within data flows under privacy protection.",
     CTALink: "https://www.padolabs.org/events",
-    CTATitle: "Learn more",
+    CTATitle: "Go to pado",
     address: "0xDB736B13E2f522dBE18B2015d0291E4b193D8eF6",
   },
   {
@@ -49,7 +49,7 @@ export const issuersData: IIssuer[] = [
     description:
       "Generating a zero-knowledge proof based on an HTTPS Web Session that represents your IRL assets and identity, right in the browser locally, and no API authorization is required.",
     CTALink: "https://verax.zkpass.org/verax",
-    CTATitle: "Learn more",
+    CTATitle: "Go To zkPass",
     address: "0x182085Ce8b0faDdc8503D9921dF6Af076281A6A9",
   },
   {
@@ -59,7 +59,7 @@ export const issuersData: IIssuer[] = [
     description:
       "Connect your Twitter account & claim your Twitter attestations on the Linea Network. Your attestations will be directly embedded in Linea's reputation layer.",
     CTALink: "https://www.clique.social/attestor/twitterLinea",
-    CTATitle: "Learn more",
+    CTATitle: "Connect with clique",
     address: "0x4401A1667dAFb63Cff06218A69cE11537de9A101",
   },
   {
@@ -68,7 +68,7 @@ export const issuersData: IIssuer[] = [
     keywords: ["zk-attestations", "social account attestation"],
     description: "A Decentralized authentication protocol that provides proofs for user's Web2 accounts.",
     CTALink: "https://auth.openid3.xyz",
-    CTATitle: "Learn more",
+    CTATitle: "Go to openid3",
     address: "0xdbCaf063873dC6be53c007Cf8f8447E303Cac8A3",
   },
   {
@@ -78,7 +78,7 @@ export const issuersData: IIssuer[] = [
     description:
       "Nomis is an Identity and Reputation Protocol that leverages users onchain activity to assign Reputation Scores to their wallets. It serves as the Layer for Web3 Personalization, enabling users to create, develop and leverage their onchain Reputation.",
     CTALink: "https://nomis.cc/linea-voyage",
-    CTATitle: "Learn more",
+    CTATitle: "Go To Nomis",
     address: "0x8535156C75750d79ee0D9829c5D4Ae6f5D9DbCB5",
   },
   {
@@ -87,8 +87,8 @@ export const issuersData: IIssuer[] = [
     keywords: ["identity", "reputation"],
     description:
       "Orange is a reputation minting protocol that aggregates data and models to generate comprehensive trust proofs in the form of VCs and NFTs.",
-    CTALink: undefined,
-    CTATitle: "Learn more",
+    CTALink: "https://www.orangeprotocol.io/",
+    CTATitle: "Go to orange",
     address: "0x3176383A7590D6B5c6F6268209f4c7FDeb7244Dc",
   },
   {
@@ -98,7 +98,7 @@ export const issuersData: IIssuer[] = [
     description:
       "0xScore is a web3 reputational tool for wallets based on their on-chain activity. It allows you to analyze and compare wallets to understand their reputation and power.",
     CTALink: "https://0xscore.pro/linea-attestation",
-    CTATitle: "Learn more",
+    CTATitle: "Go To 0xScore",
     address: "0x04636DdD2feF7e9DB42a24821E489AD071749fEA",
   },
 ];
diff --git a/explorer/src/routes/constants.ts b/explorer/src/routes/constants.ts
@@ -42,5 +42,4 @@ export const APP_ROUTES = {
 export const toAttestationById = (id: string) => APP_ROUTES.ATTESTATION_BY_ID.replace(ID_ROUTE, id);
 export const toSchemaById = (id: string) => APP_ROUTES.SCHEMA_BY_ID.replace(ID_ROUTE, id);
 export const toModuleById = (id: string) => APP_ROUTES.MODULES_BY_ID.replace(ID_ROUTE, id);
-export const toIssuerById = (id: string) => APP_ROUTES.ISSUER_BY_ID.replace(ID_ROUTE, id);
 export const toPortalById = (id: string) => APP_ROUTES.PORTAL_BY_ID.replace(ID_ROUTE, id);
diff --git a/explorer/tailwind.config.js b/explorer/tailwind.config.js
@@ -15,6 +15,7 @@ export default {
       colors: {
         whiteDefault: "var(--white-default)",
         blackDefault: "var(--black-default)",
+        jumbotron: "var(--jumbotron)",
         background: "var(--surface-primary)",
         borderCard: "var(--border)",
         skeleton: "var(--skeleton)",