DCFoundation · FredRadford · Mar 7, 2024 · Feb 22, 2024 · Feb 22, 2024 · Feb 25, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,34 +2,36 @@ import { Suspense } from "react";
 import { ToastContainer } from "react-toastify";
 import { Switch, Route } from "wouter";
 import { Nav } from "./components/Nav";
-import { Footer } from "./components/Footer";
 import { ChainMenu } from "./components/ChainMenu";
 import { NetworkDropdown } from "./components/NetworkDropdown";
 import { WalletConnectButton } from "./components/WalletConnectButton";
 import { ChainTiles } from "./components/ChainTiles";
 import { useChain } from "./hooks/useChain";
 import { chainConfigMap } from "./config";
+import { LayoutFooter } from "./components/LayoutFooter.tsx";
 
 const App = () => {
   const { chains } = useChain();
   return (
     <div className="flex flex-col min-h-screen">
       <Nav
         title="Cosmos Proposal Builder"
-        showLogo={true}
+        showLogo={false}
         rightContent={
           <>
-            <div className="mr-6 relative">
+            <div className="mr-[5px] relative hidden sm:flex">
               <ChainMenu />
             </div>
-            <div className="mr-6 relative">
+            <div className="mr-[5px] relative hidden sm:flex">
               <NetworkDropdown />
             </div>
-            <WalletConnectButton theme="white" />
+            <div>
+              <WalletConnectButton theme="black" />
+            </div>
           </>
         }
       />
-      <main className="flex-grow mx-auto max-w-7xl min-w-full py-6 sm:px-6 lg:px-8">
+      <main className="flex-grow mx-auto max-w-7xl min-w-full py-3 sm:py-6 sm:px-6 lg:px-8">
         <Switch>
           <Route path="/" component={() => <ChainTiles chains={chains} />} />
           {chains.map(({ href, value }) => {
@@ -47,8 +49,8 @@ const App = () => {
             );
           })}
         </Switch>
+        <LayoutFooter />
       </main>
-      <Footer />
       <ToastContainer
         autoClose={false}
         position="bottom-right"

diff --git a/src/assets/menu-item-selected.svg b/src/assets/menu-item-selected.svg
diff --git a/src/components/BundleForm.tsx b/src/components/BundleForm.tsx
@@ -71,25 +71,21 @@ const BundleForm = forwardRef<BundleFormMethods, BundleFormProps>(
     };
 
     return (
-      <form ref={formRef} className="py-6 px-8" onSubmit={onSubmit}>
+      <form ref={formRef} className="" onSubmit={onSubmit}>
         <div className="space-y-12 sm:space-y-16">
           <div>
-            <h2 className="text-base font-semibold leading-7 text-gray-900">
-              {title}
-            </h2>
-            <p className="mt-1 max-w-3xl text-sm leading-6 text-gray-600">
-              {description}
-            </p>
+            <h2 className="text-[28px] font-semibold text-blue">{title}</h2>
+            <p className="mt-4 text-sm text-grey">{description}</p>
 
-            <div className="mt-10 space-y-8 border-b border-gray-900/10 pb-12 sm:space-y-0 sm:divide-y sm:divide-gray-900/10 sm:border-t sm:pb-0">
-              <div className="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4 sm:py-6">
+            <div className="mt-[30px] space-y-3 border-t border-dotted border-lightgrey py-[30px] sm:border-t sm:pb-0">
+              <div className="sm:grid sm:grid-cols-1 sm:items-start">
                 <label
                   htmlFor="description"
-                  className="block text-sm font-medium leading-6 text-gray-900 sm:pt-1.5"
+                  className="text-sm font-medium text-blue"
                 >
                   Bundle JSON
                 </label>
-                <div className="mt-2 sm:col-span-3 sm:mt-0">
+                <div className="mt-0">
                   <CodeInput
                     ref={codeInputRef}
                     label="JSON Bundle"
@@ -110,7 +106,7 @@ const BundleForm = forwardRef<BundleFormMethods, BundleFormProps>(
             type="submit"
             Icon={null}
             text="Sign & Submit"
-            theme="dark"
+            theme="red"
             layoutStyle="flex w-1/4"
           />
         </div>

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,18 +1,20 @@
 import { ReactNode } from "react";
-import { WalletIcon } from "@heroicons/react/20/solid";
 import { classNames } from "../utils/classNames";
 
 export interface ButtonProps {
   onClick?: () => void;
   Icon?: ReactNode;
   text: string;
-  theme: "light" | "dark" | "white";
+  theme: "light" | "dark" | "white" | "red" | "black" | "grey";
   layoutStyle?: string;
   type?: HTMLButtonElement["type"];
 }
 
 const butttonThemeStyles = {
   dark: "text-white bg-teal-600 focus-visible:outline-teal-600 hover:opacity-80",
+  black: "text-white bg-black focus-visible:outline-teal-600 hover:opacity-80",
+  red: "text-white rounded-lg py-[16px] text-base font-bold w-full bg-red focus-visible:outline-none hover:opacity-80",
+  grey: "text-blue rounded-lg py-[14px] text-sm font-bold bg-[#0F39411A] focus-visible:outline-none hover:opacity-80",
   light:
     "text-black bg-teal-200 focus-visible:outline-teal-200 hover:bg-teal-300",
   white:
@@ -30,9 +32,9 @@ const Button = ({
   <button
     type={type}
     className={classNames(
-      "items-center justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+      "items-center justify-center rounded-md px-4 py-3 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
       butttonThemeStyles[theme],
-      layoutStyle || "inline-flex w-48",
+      layoutStyle || "inline-flex",
     )}
     onClick={onClick}
   >
@@ -42,7 +44,25 @@ const Button = ({
 );
 
 Button.defaultProps = {
-  Icon: <WalletIcon className="mr-1.5 h-5 w-8" aria-hidden="true" />,
+  //Icon: <WalletIcon className="mr-1.5 h-5 w-8" aria-hidden="true" />,
+  Icon: (
+    <svg
+      className={"mr-[10px]"}
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="12"
+      viewBox="0 0 16 12"
+      fill="none"
+    >
+      <path
+        d="M1 6.38889V2.53691M11.5 6H11.5078M1 3.43333L1 8.56666C1 9.43786 1 9.87345 1.16955 10.2062C1.31868 10.4989 1.55665 10.7369 1.84935 10.886C2.1821 11.0556 2.6177 11.0556 3.48889 11.0556H12.5111C13.3823 11.0556 13.8179 11.0556 14.1507 10.886C14.4433 10.7369 14.6813 10.4989 14.8305 10.2062C15 9.87345 15 9.43786 15 8.56666V3.43333C15 2.56214 15 2.12654 14.8305 1.79379C14.6813 1.5011 14.4433 1.26313 14.1507 1.11399C13.8179 0.944444 13.3823 0.944444 12.5111 0.944444L3.48889 0.944443C2.6177 0.944443 2.1821 0.944443 1.84935 1.11399C1.55665 1.26312 1.31868 1.50109 1.16955 1.79379C1 2.12654 1 2.56214 1 3.43333ZM11.8889 6C11.8889 6.21478 11.7148 6.38889 11.5 6.38889C11.2852 6.38889 11.1111 6.21478 11.1111 6C11.1111 5.78522 11.2852 5.61111 11.5 5.61111C11.7148 5.61111 11.8889 5.78522 11.8889 6Z"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
   theme: "white",
 };
 

diff --git a/src/components/ChainMenu.tsx b/src/components/ChainMenu.tsx
@@ -5,7 +5,7 @@ import { DropdownMenu } from "../components/DropdownMenu";
 import { useChain } from "../hooks/useChain";
 
 // XXX Select Chain, Select App ?
-const placeholderText = "Select";
+const placeholderText = "Select Chain";
 
 const ChainMenu = () => {
   const { chain, chains } = useChain();
@@ -22,8 +22,8 @@ const ChainMenu = () => {
       labelImage={labelImage}
       items={chains}
       showImage={true}
-      buttonStyle="w-32"
-      dropdownItemStyle="w-32"
+      buttonStyle=""
+      dropdownItemStyle=""
     />
   );
 };

diff --git a/src/components/ChainTiles.tsx b/src/components/ChainTiles.tsx
@@ -7,18 +7,16 @@ const selectChainDescription =
 
 const ChainTiles = ({ chains }: { chains: ChainList }) => {
   return (
-    <div className="w-full max-w-5xl px-2 py-2 sm:px-0 m-auto">
+    <div className="w-full max-w-7xl px-2 py-2 sm:px-0 m-auto">
       <div className="flex flex-col min-w-full rounded-xl bg-white p-3">
-        <div className="py-6 px-8">
+        <div className="py-2 px-2">
           <div>
-            <h2 className="text-base font-semibold leading-7 text-gray-900">
+            <h2 className="text-[28px] font-semibold text-blue">
               {selectChainTitle}
             </h2>
-            <p className="mt-2 max-w-4xl text-sm leading-6 text-gray-600">
-              {selectChainDescription}
-            </p>
+            <p className="mt-4 text-sm text-grey">{selectChainDescription}</p>
           </div>
-          <div className="mt-6 py-10 sm:divide-y sm:divide-gray-900/10 sm:border-t-2">
+          <div className="mt-[30px] space-y-3 border-t border-dotted border-lightgrey py-[30px] sm:border-t sm:pb-0">
             <ul
               role="list"
               className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"

diff --git a/src/components/CodeInput.tsx b/src/components/CodeInput.tsx
@@ -82,7 +82,7 @@ const CodeInput = forwardRef<CodeInputMethods, CodeInputProps>(
     }, [bundleCost, istBalance]);
 
     return (
-      <div className="flex flex-col mr-8">
+      <div className="flex flex-col">
         {!content ? (
           <div className="mt-2 min-w-full">
             <DragDrop

diff --git a/src/components/CodeInputGroup.tsx b/src/components/CodeInputGroup.tsx
@@ -46,32 +46,38 @@ const CodeInputGroup = forwardRef<CodeInputGroupMethods, CodeInputGroupProps>(
     }));
 
     return (
-      <div className="flex flex-col items-start min-w-full">
+      <div className="flex flex-col items-start">
         {pairs.map((_, index) => (
-          <div key={index} className="flex mb-5 mx-15">
-            <CodeInput
-              ref={jsonRef}
-              label="JSON Permit"
-              accept="application/json"
-              prismTag="lang-json"
-              onContentChange={(content) => handlePermitChange(index, content)}
-              subtitle=".json files accepted"
-            />
-            <CodeInput
-              ref={jsRef}
-              label="JS Script"
-              accept="text/javascript"
-              prismTag="lang-javascript"
-              onContentChange={(content) => handleCodeChange(index, content)}
-              subtitle=".js files accepted"
-            />
+          <div key={index} className="grid grid-cols-2 gap-[10px] mb-5">
+            <div className={``}>
+              <CodeInput
+                ref={jsonRef}
+                label="JSON Permit"
+                accept="application/json"
+                prismTag="lang-json"
+                onContentChange={(content) =>
+                  handlePermitChange(index, content)
+                }
+                subtitle=".json files accepted"
+              />
+            </div>
+            <div className={``}>
+              <CodeInput
+                ref={jsRef}
+                label="JS Script"
+                accept="text/javascript"
+                prismTag="lang-javascript"
+                onContentChange={(content) => handleCodeChange(index, content)}
+                subtitle=".js files accepted"
+              />
+            </div>
           </div>
         ))}
         <Button
           onClick={addMore}
           Icon={null}
           text="Add more files"
-          theme="dark"
+          theme="grey"
           layoutStyle="flex w-1/3"
         />
       </div>