From c4245d16b8b2cf3e097d9b93c517d63d9cf49292 Mon Sep 17 00:00:00 2001
From: Taras Oliynyk <49455800+OliynykPro@users.noreply.github.com>
Date: Tue, 19 Dec 2023 12:51:03 +0200
Subject: [PATCH] fix: Main page UI fixes (#477)

Co-authored-by: Taras Oliynyk <taras.oliynyk@hapi.one>
---
 explorer/src/assets/locales/en/en.json        |  5 ++-
 explorer/src/components/Buttons/index.tsx     |  5 +--
 explorer/src/components/Buttons/interface.ts  |  1 +
 explorer/src/index.css                        | 12 +++++--
 .../src/pages/Home/components/Info/index.tsx  |  2 +-
 .../pages/Home/components/Issuer/index.tsx    | 35 +++++++++++++++----
 .../pages/Home/components/Issuers/index.tsx   |  2 +-
 .../Home/components/TitleSearch/index.tsx     | 13 ++-----
 explorer/src/pages/Home/data.tsx              | 20 +++++------
 explorer/src/routes/constants.ts              |  1 -
 explorer/tailwind.config.js                   |  1 +
 11 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/explorer/src/assets/locales/en/en.json b/explorer/src/assets/locales/en/en.json
index 44c9ecfc..7b54d2bd 100644
--- 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
index c5f555b7..91962c08 100644
--- 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
index bc7befc4..3f497f26 100644
--- 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
index 1b17f72b..4afdaa1f 100644
--- 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
index 484afbca..bfa90745 100644
--- 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
index c6c4c7ae..93a65644 100644
--- 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
index 6e91e946..dc2e0c27 100644
--- 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
index c1c5e46e..20fe9929 100644
--- 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
index fef3d64d..512ee028 100644
--- 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
index c01528ab..a4166bf3 100644
--- 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
index 10188977..86861115 100644
--- 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)",