Merge pull request #124 from horuslabsio/Responsive-landing-page

Responsive landing page

frontend/src/app/components/TransactionList/TransactionItem.tsx

@@ -34,7 +34,7 @@ const TransactionItem = ({ transaction }: { transaction: Transaction }) => {
   }
 
   return (
-    <div className="flex items-center gap-4 rounded-[24px] border-[1px] border-solid border-[--headings] bg-transparent p-4">
+    <div className="flex items-center gap-4 rounded-[24px] border-[1px] border-solid border-[--headings] bg-transparent p-2 text-sm md:p-4">
       <div>
         <span className="grid h-12 w-12 place-content-center rounded-[12px] bg-yellow-secondary text-l text-yellow-primary">
           <WarnBadge />
@@ -58,9 +58,9 @@ const TransactionItem = ({ transaction }: { transaction: Transaction }) => {
         </svg> */}
       </div>
 
-      <div className="flex flex-1 flex-col gap-4 px-4">
-        <div className="flex items-center justify-between">
-          <div className="flex w-fit items-center gap-2 rounded-full bg-[--link-card] px-4 py-2">
+      <div className="flex flex-1 flex-col gap-2 px-2 md:gap-4 md:px-4">
+        <div className="flex flex-wrap items-center justify-between gap-y-2">
+          <div className="flex w-fit items-center gap-2 rounded-full bg-[--link-card] p-1 md:px-4 md:py-2">
             <div className="h-8 w-8 overflow-clip rounded-full">
               <Blockies
                 seed={address || ""}
@@ -73,7 +73,7 @@ const TransactionItem = ({ transaction }: { transaction: Transaction }) => {
                 address?.slice(0, 6).concat("...").concat(address?.slice(-5))}
             </p>
           </div>
-          <div>
+          <div className="ml-auto">
             <p className="text-green-secondary">+234 ETH</p>
           </div>
         </div>

frontend/src/app/components/TransactionList/TransactionModal.tsx

@@ -48,17 +48,20 @@ const TransactionModal = () => {
   return (
     <GenericModal
       popoverId="transaction-modal"
-      style="mx-auto bg-transparent p-0 w-full h-full mt-[9rem] backdrop:mt-[9rem]"
+      style="mx-auto mt-[5rem]  h-full w-full bg-transparent p-0 backdrop:mt-[5rem] md:mt-[9rem] md:backdrop:mt-[9rem]"
     >
-      <div className="mx-auto mt-8 flex max-w-[2000px] flex-col items-end">
-        <div className="ml-auto mr-[3rem] w-[30rem] rounded-[24px] bg-[--background] p-8 text-text-primary shadow-popover-shadow">
+      <div className="mx-auto mt-8 flex max-w-[--header-max-w] flex-col items-center md:items-end">
+        <div className="w-[95vw] max-w-[30rem] rounded-[24px] bg-[--background] p-8 text-text-primary shadow-popover-shadow md:ml-auto md:mr-[3rem]">
           <div className="mb-8 flex justify-between">
             <h3 className="text-l text-[--headings]">Transaction List</h3>
-            <button popoverTarget="transaction-modal">
+            <button
+              //@ts-ignore
+              popoverTarget="transaction-modal"
+            >
               <Close />
             </button>
           </div>
-          <div className="flex flex-col gap-4">
+          <div className="transactions-modal flex h-[60svh] max-h-[600px] flex-col gap-4 overflow-scroll md:h-full">
             {transactions.map((transaction, index) => (
               <TransactionItem key={index} transaction={transaction} />
             ))}

frontend/src/app/components/header/AddTokenModal.tsx

@@ -45,15 +45,16 @@ const AddTokenModal = () => {
   }
 
   return (
-    <GenericModal
-      popoverId="add-token-popover"
-      style={`bg-transparent w-full h-full`}
-    >
-      <div className="flex h-full items-center">
-        <div className="mx-auto h-fit w-[30rem] rounded-[24px] bg-[--background] p-8 text-[--headings] shadow-popover-shadow">
+    <GenericModal popoverId="add-token-popover" style={`bg-transparent w-full`}>
+      <div className="gird h-svh place-content-center">
+        <div className="mx-auto h-[98svh] max-h-[600px] w-[95vw] max-w-[30rem] overflow-scroll rounded-[24px] bg-[--background] p-8 text-[--headings] shadow-popover-shadow">
           <div className="mb-8 flex justify-between">
             <h3 className="text-l text-[--headings]">Add Token</h3>
-            <button popoverTarget="add-token-popover">
+
+            <button
+              // @ts-ignore
+              popoverTarget="add-token-popover"
+            >
               <Close />
             </button>
           </div>

frontend/src/app/components/header/AddressBar.tsx

@@ -12,11 +12,26 @@ const AddressBar = () => {
     return null;
   }
 
+  const togglePopover = ({ targetId }: { targetId: string }) => {
+    const popover = document.getElementById(targetId);
+    // @ts-ignore
+    popover.togglePopover();
+    if (popover) {
+      popover.addEventListener("toggle", () => {
+        if (popover.matches(":popover-open")) {
+          document.body.style.overflow = "hidden";
+        } else {
+          document.body.style.overflow = "";
+        }
+      });
+    }
+  };
+
   return (
     <button
       aria-haspopup="dialog"
-      popovertarget="user-popover"
-      className="bg-primary rounded-full px-4 py-2 transition duration-300"
+      onClick={() => togglePopover({ targetId: "user-popover" })}
+      className="rounded-full bg-button-tertiary px-2 py-1 text-accent-secondary md:px-4 md:py-2"
     >
       {
         <span className="flex items-center">

frontend/src/app/components/header/Header.tsx

@@ -48,6 +48,21 @@ const Header = () => {
     };
   }, []);
 
+  const togglePopover = ({ targetId }: { targetId: string }) => {
+    const popover = document.getElementById(targetId);
+    // @ts-ignore
+    popover.togglePopover();
+    if (popover) {
+      popover.addEventListener("toggle", () => {
+        if (popover.matches(":popover-open")) {
+          document.body.style.overflow = "hidden";
+        } else {
+          document.body.style.overflow = "";
+        }
+      });
+    }
+  };
+
   return (
     <div
       onMouseEnter={(e) => {
@@ -64,39 +79,43 @@ const Header = () => {
         e.currentTarget.setAttribute("data-header", "scroll-show")
       }
       id="nav"
-      className="fixed z-[9999] w-full px-8 pt-8 transition-all duration-500"
+      className="fixed z-[9999] w-full px-2 pt-4 transition-all duration-500 md:px-8 md:pt-8"
     >
-      <header className="rounded-[32px] bg-primary-gradient">
-        <div className="mx-auto flex h-[7rem] max-w-[2000px] items-center justify-between px-8">
-          <div className="w-[18.75rem]">
+      <header className="rounded-[12px] bg-primary-gradient md:rounded-[32px]">
+        <div className="mx-auto flex h-16 max-w-[--header-max-w] items-center justify-between px-4 md:h-28 md:px-8">
+          <div className="hidden w-[18.75rem] md:block">
             <img src="/assets/logo.svg" alt="logo" className="h-full w-full" />
           </div>
+
+          <div className="block md:hidden">
+            <img src="/assets/mobile-logo.svg" alt="" />
+          </div>
           <div className="relative">
             {address ? (
               <div className="flex items-center gap-4">
-                <button className="rounded-full bg-button-tertiary text-accent-secondary">
-                  <AddressBar />
-                </button>
+                <AddressBar />
                 <button
                   aria-haspopup="dialog"
-                  popoverTarget="transaction-modal"
-                  className="grid h-12 w-12 place-content-center rounded-full bg-accent-secondary text-[1.5em] text-background-primary-light"
+                  onClick={() =>
+                    togglePopover({ targetId: "transaction-modal" })
+                  }
+                  className="grid h-10 w-10 place-content-center rounded-full bg-accent-secondary text-[1.5em] text-background-primary-light md:h-12 md:w-12"
                 >
                   <Menu />
                 </button>
               </div>
             ) : (
               <button
                 aria-haspopup="dialog"
-                popoverTarget="connect-modal"
-                className="rounded-[12px] bg-button-primary px-6 py-4 text-background-primary-light"
+                onClick={() => togglePopover({ targetId: "connect-modal" })}
+                className="rounded-[12px] bg-button-primary px-6 py-3 text-background-primary-light transition-all duration-300 hover:rounded-[30px] md:py-4"
               >
                 Connect Wallet
               </button>
             )}
 
             <ThemeSwitch
-              className="absolute bottom-[-250%] left-1/2"
+              className="absolute bottom-[-250%] left-1/2 hidden md:grid"
               action={changeTheme}
               theme={theme}
             />

frontend/src/app/components/header/Theme.tsx

@@ -22,7 +22,7 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = ({
         width: dimension,
         height: dimension,
       }}
-      className={`grid place-content-center rounded-full bg-button-secondary transition-[opacity] duration-500 ${className}`}
+      className={`place-content-center rounded-full bg-button-secondary transition-[opacity] duration-500 ${className}`}
       onClick={action}
     >
       {theme === "dark" ? (

frontend/src/app/components/header/UserModal.tsx

@@ -40,19 +40,17 @@ const UserModal = () => {
   return (
     <GenericModal
       popoverId="user-popover"
-      style="w-full mt-[9rem] bg-transparent backdrop:mt-[9rem]"
+      style="mt-[5rem] w-full bg-transparent backdrop:mt-[5rem] md:mt-[9rem] md:backdrop:mt-[9rem]"
     >
-      <div className="user-modal mx-auto flex h-[--m-100vh] w-full max-w-[2000px] flex-col items-end px-12">
-        <div
-          style={{
-            zoom: "0.9",
-          }}
-          className="pt-8"
-        >
-          <div className="mb-8 flex w-[30rem] flex-col justify-between gap-4 rounded-[24px] bg-[--background] p-8 text-md text-text-primary shadow-popover-shadow transition-colors duration-500 ease-linear">
+      <div className="user-modal mx-auto flex h-[--modal-h] w-full max-w-[--header-max-w] flex-col items-center md:items-end md:px-12">
+        <div className="zoom pt-8">
+          <div className="mb-8 flex w-[95vw] max-w-[30rem] flex-col justify-between gap-4 rounded-[24px] bg-[--background] p-8 text-md text-text-primary shadow-popover-shadow transition-colors duration-500 ease-linear">
             <div className="flex justify-between">
               <h3 className="text-l text-[--headings]">Connected</h3>
-              <button popoverTarget="user-popover">
+              <button
+                // @ts-ignore
+                popoverTarget="user-popover"
+              >
                 <Close />
               </button>
             </div>
@@ -107,6 +105,7 @@ const UserModal = () => {
               <button
                 onClick={(e) => {
                   const popover = document.getElementById("user-popover");
+                  // @ts-ignore
                   popover.hidePopover();
                   disconnect();
                 }}
@@ -117,19 +116,17 @@ const UserModal = () => {
             </div>
           </div>
         </div>
-        <div
-          style={{
-            zoom: "0.9",
-          }}
-          className="pb-8"
-        >
-          <div className="flex w-[30rem] flex-col gap-4 rounded-[24px] bg-[--background] p-8 shadow-popover-shadow transition-colors duration-500 ease-linear">
+        <div className="zoom pb-8">
+          <div className="flex w-[95vw] max-w-[30rem] flex-col gap-4 rounded-[24px] bg-[--background] p-8 shadow-popover-shadow transition-colors duration-500 ease-linear">
             <div className="flex items-center justify-between">
               <p className="text-text-primary">Select Network</p>
               <NetworkSwitcher />
             </div>
             <div>
-              <button className="flex w-full items-center justify-center gap-2 rounded-[12px] border-[2px] border-solid border-[--headings] p-4 text-[--headings]">
+              <button // @ts-ignore
+                popoverTarget="transaction-modal"
+                className="flex w-full items-center justify-center gap-2 rounded-[12px] border-[2px] border-solid border-[--headings] p-4 text-[--headings]"
+              >
                 <span className="text-l">
                   <Library />
                 </span>
@@ -139,6 +136,7 @@ const UserModal = () => {
             <div>
               <button
                 aria-haspopup="dialog"
+                // @ts-ignore
                 popoverTarget="add-token-popover"
                 className="w-full rounded-[12px] bg-accent-secondary p-4 text-background-primary-light"
               >
@@ -148,7 +146,7 @@ const UserModal = () => {
 
             <div>
               <ThemeSwitch
-                className="ml-auto"
+                className="grid"
                 action={changeTheme}
                 theme={theme}
                 dimension="3rem"

frontend/src/app/components/ui_components/NetworkSwitcher.tsx

@@ -19,7 +19,7 @@ const networks = [
   },
 ];
 
-export function NetworkSwitcher() {
+export default function NetworkSwitcher() {
   const { chain } = useNetwork();
   const [open, setOpen] = React.useState(false);
   const [selectedNetwork, setSelectedNetwork] = React.useState(
@@ -46,10 +46,10 @@ export function NetworkSwitcher() {
   }, [chain.network]);
 
   return (
-    <div className="relative flex flex-col gap-y-3 transition-all duration-500">
+    <div className="relative flex w-[50%] max-w-[12rem] flex-col gap-y-3 text-[--headings] transition-all duration-500">
       <button
         role="combobox"
-        className="flex w-[12rem] cursor-pointer items-center justify-between rounded-[12px] border-[2px] border-solid border-[--borders] bg-[--link-card] p-3 text-md text-[--headings]"
+        className="flex h-12 cursor-pointer items-center justify-between rounded-[12px] border-[2px] border-solid border-[--borders] bg-[--link-card] px-4"
         onClick={() => {
           setOpen((prev) => !prev);
         }}
@@ -67,12 +67,12 @@ export function NetworkSwitcher() {
         </span>
       </button>
       <div
-        className={`absolute left-0 top-[65px] z-[10] grid w-[250px] overflow-hidden rounded-xl shadow-md transition-all duration-300 ease-in-out ${
+        className={`absolute left-0 top-[65px] z-[10] grid w-[250px] -translate-x-1/2 overflow-hidden rounded-xl transition-all duration-300 ease-in-out md:translate-x-0 ${
           open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
         }`}
       >
-        <div className="overflow-hidden rounded-xl">
-          <div className="flex flex-col overflow-hidden rounded-xl border-[2px] border-solid border-[--borders] bg-[--link-card]">
+        <div className="overflow-hidden">
+          <div className="flex flex-col rounded-[12px] border-[2px] border-solid border-[--borders] bg-[--link-card]">
             {networks.map((network) => (
               <button
                 className="flex w-full cursor-pointer items-center rounded-xl px-4 py-3"
@@ -94,30 +94,6 @@ export function NetworkSwitcher() {
           </div>
         </div>
       </div>
-      {/* <div
-        className={` ${open ? "inline-block h-fit" : "hidden h-0 overflow-hidden"} absolute left-0 top-[75px] z-[10] mx-auto flex w-[250px] flex-col overflow-hidden rounded-xl border-[2px] border-solid border-[--borders] bg-[--link-card] transition-all duration-500`}
-      >
-        {networks.map((network) => (
-          <button
-            className="flex w-full cursor-pointer items-center px-4 py-3"
-            key={network.value}
-            value={network.value}
-            onClick={() => {
-              switchNetwork(network.value, network.label);
-              setOpen(false);
-            }}
-          >
-            <span
-              className={`mr-2 text-md ${selectedNetwork === network.value ? "opacity-100" : "opacity-0"}`}
-            >
-              <Check />
-            </span>
-            <span>{network.label}</span>
-          </button>
-        ))}
-      </div> */}
     </div>
   );
 }
-
-export default NetworkSwitcher;