Merge pull request #71 from Proof-Of-Humanity/feat/style-improvements

feat: style improvements, UI/UX improvements

package.json

@@ -27,11 +27,13 @@
     "postcss-nested": "^6.0.0",
     "process": "^0.11.10",
     "stream-browserify": "^3.0.0",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.0.4",
     "util": "^0.12.4"
   },
   "dependencies": {
+    "@cyntler/react-doc-viewer": "^1.16.3",
+    "react-markdown": "^8.0.7",
     "@ffmpeg/ffmpeg": "^0.10.1",
     "@legendapp/state": "^1.11.1",
     "@web3modal/ethereum": "^2.7.1",

src/app/Footer.tsx

@@ -1,17 +1,17 @@
-import ExternalLink from "components/ExternalLink";
 import Image from "next/image";
+import ExternalLink from "components/ExternalLink";
 
 const Footer: React.FC = () => (
-  <nav className="absolute bottom-0 w-full grid grid-cols-2 sm:grid-cols-3 text-white text-lg gradient shadow-sm px-8 py-4">
-    <ExternalLink href="https://proofofhumanity.id/">Learn More</ExternalLink>
+  <div className="bottom-0 w-full flex flex-wrap justify-center sm:justify-between items-center gap-y-[20px] gap-x-[240px] text-white text-lg gradient shadow-sm px-8 py-4">
     <ExternalLink
-      className="justify-self-end sm:place-self-center flex items-center gap-2 text-sm"
+      className="flex items-center gap-2 text-sm"
       href="https://kleros.io/"
     >
       SECURED BY{" "}
       <Image alt="kleros" src="/logo/kleros.svg" width={96} height={24} />
     </ExternalLink>
-    <div className="mt-4 sm:mt-0 place-self-center col-span-2 sm:col-span-1 sm:justify-self-end flex items-center gap-4">
+
+    <div className="flex items-center gap-4">
       <ExternalLink href="https://snapshot.org/#/poh.eth/">
         <Image alt="snapshot" src="/logo/snapshot.svg" width={20} height={20} />
       </ExternalLink>
@@ -25,7 +25,7 @@ const Footer: React.FC = () => (
         <Image alt="telegram" src="/logo/telegram.svg" width={20} height={20} />
       </ExternalLink>
     </div>
-  </nav>
+  </div>
 );
 
 export default Footer;

src/app/Header/DesktopNavigation.tsx

@@ -0,0 +1,71 @@
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { sepolia } from "viem/chains";
+import ExternalLink from "components/ExternalLink";
+import { prettifyId } from "utils/identifier";
+
+interface DesktopNavigationProps {
+  web3Loaded: boolean;
+  chain: { id: number; name: string };
+  pathname: string;
+  policy: string;
+  me: any;
+  address?: `0x${string}`;
+}
+
+const DesktopNavigation = ({
+  web3Loaded,
+  chain,
+  pathname,
+  policy,
+  me,
+  address,
+}: DesktopNavigationProps) => {
+  const searchParams = useSearchParams();
+  const currentUrl = searchParams.get("url");
+
+  return (
+    <div className="hidden md:flex my-2 gap-x-8 whitespace-nowrap">
+      {web3Loaded && chain.id === sepolia.id && (
+        <ExternalLink href="https://docs.scroll.io/en/user-guide/faucet/">
+          Faucet
+        </ExternalLink>
+      )}
+      <Link href="/" className={`${pathname === "/" ? "font-bold" : ""}`}>
+        Profiles
+      </Link>
+      {me &&
+        (me.pohId ? (
+          <Link
+            href={`/${prettifyId(me.pohId)}`}
+            className={`${
+              pathname === `/${prettifyId(me.pohId)}` ? "font-bold" : ""
+            }`}
+          >
+            PoH ID
+          </Link>
+        ) : (
+          <Link
+            href={
+              me.currentRequest
+                ? `/${prettifyId(me.currentRequest.humanity.id)}/${
+                    me.currentRequest.chain.name
+                  }/${me.currentRequest.index}`
+                : `/${prettifyId(address!)}/claim`
+            }
+            className={`${pathname.includes("/claim") ? "font-bold" : ""}`}
+          >
+            Register
+          </Link>
+        ))}
+      <Link
+        href={`/attachment?url=${encodeURIComponent(policy)}`}
+        className={`${currentUrl?.includes(policy) ? "font-bold" : ""}`}
+      >
+        Policy
+      </Link>
+    </div>
+  );
+};
+
+export default DesktopNavigation;