Move new tier setup to end of list; change style

wbt · Oct 22, 2023 · ddfdc17 · ddfdc17
1 parent 201666f
commit ddfdc17
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 37 deletions.
diff --git a/packages/nextjs/components/example-ui/TierList.tsx b/packages/nextjs/components/example-ui/TierList.tsx
@@ -1,4 +1,5 @@
 import { TierCard } from "./TierCard";
+import { TierSetup } from "./TierSetup";
 
 export const TiersList = (props: { merchant?: string; tiersLength?: bigint }) => {
   const tiersLength = props.tiersLength;
@@ -17,6 +18,7 @@ export const TiersList = (props: { merchant?: string; tiersLength?: bigint }) =>
           {indicies.map(index => (
             <TierCard key={index.toString()} merchant={merchant} tierIndex={index} showOfferedStatus={true} />
           ))}
+          <TierSetup />
         </ol>
       </div>
     </div>

diff --git a/packages/nextjs/components/example-ui/TierListing.tsx b/packages/nextjs/components/example-ui/TierListing.tsx
@@ -44,7 +44,7 @@ export const TierListing = () => {
   const { data: yourContract } = useScaffoldContract({ contractName: "SubscryptoToken" });
   console.log("subscryptoToken: ", yourContract);
 
-  let tierCountText = "No defined tiers for this merchant account yet! Use the tool to the right to create one.";
+  let tierCountText = "No defined tiers for this merchant account yet! You can create one below.";
   if (isTierCountLoading) {
     tierCountText = "Loading...";
   } else if (typeof tiersLength === "undefined") {

diff --git a/packages/nextjs/components/example-ui/TierSetup.tsx b/packages/nextjs/components/example-ui/TierSetup.tsx
@@ -18,40 +18,28 @@ export const TierSetup = () => {
   });
 
   return (
-    <div className="flex bg-base-300 relative pb-10">
-      <div className="flex flex-col w-full mx-5 sm:mx-8 2xl:mx-20">
-        <div className="flex flex-col mt-6 px-7 py-8 bg-base-200 opacity-80 rounded-2xl shadow-lg border-2 border-primary">
-          <span className="text-xl my-4">Create a new service tier:</span>
-          <input
-            type="number"
-            placeholder="Calls/activities per week maximum"
-            className="input w-full px-5 border border-primary text-lg my-4"
-            onChange={e => setUnitsPerWeek(e.target.value)}
-          />
-          <br />
-          <input
-            type="number"
-            placeholder="Price per week in credits (each ≈$1)"
-            className="input w-full px-5 border border-primary text-lg my-4"
-            onChange={e => setPricePerWeek(e.target.value)}
-          />
-          <div className="flex rounded-full p-1 flex-shrink-0 place-content-end">
-            <button
-              className="btn btn-primary rounded-full capitalize font-normal font-white flex items-center gap-1 hover:gap-2 transition-all tracking-widest"
-              onClick={() => writeAsync()}
-              disabled={isLoading}
-            >
-              {isLoading ? (
-                <span className="loading loading-spinner loading-sm"></span>
-              ) : (
-                <>
-                  Create tier <ArrowSmallRightIcon className="w-3 h-3 mt-0.5" />
-                </>
-              )}
-            </button>
-          </div>
-        </div>
+    <li className="py-8 px-5 border border-primary rounded-xl flex flex-col m-5">
+      <span className="text-xl my-4">Create a new service tier:</span>
+      Calls/activities per week maximum:
+      <input type="number" className="input border border-primary" onChange={e => setUnitsPerWeek(e.target.value)} />
+      <br />
+      Price per week in credits (each ≈$1):
+      <input type="number" className="input border border-primary" onChange={e => setPricePerWeek(e.target.value)} />
+      <div className="flex rounded-full p-1 flex-shrink-0 place-content-end">
+        <button
+          className="btn btn-primary rounded-full capitalize font-normal font-white flex items-center gap-1 hover:gap-2 transition-all tracking-widest"
+          onClick={() => writeAsync()}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <span className="loading loading-spinner loading-sm"></span>
+          ) : (
+            <>
+              Create tier <ArrowSmallRightIcon className="w-3 h-3 mt-0.5" />
+            </>
+          )}
+        </button>
       </div>
-    </div>
+    </li>
   );
 };
diff --git a/packages/nextjs/pages/merchant.tsx b/packages/nextjs/pages/merchant.tsx
@@ -1,7 +1,6 @@
 import type { NextPage } from "next";
 import { MetaHeader } from "~~/components/MetaHeader";
 import { TierListing } from "~~/components/example-ui/TierListing";
-import { TierSetup } from "~~/components/example-ui/TierSetup";
 
 const MerchantSetup: NextPage = () => {
   return (
@@ -12,7 +11,6 @@ const MerchantSetup: NextPage = () => {
       />
       <div className="grid lg:grid-cols-2 flex-grow" data-theme="exampleUi">
         <TierListing />
-        <TierSetup />
       </div>
     </>
   );