Merge pull request #369 from OWK50GA/feat/HNG-36-external-static-page…

…=pricing-page-payment-page Feat/hng 36 external static page=pricing page payment page
hngprojects · Jul 22, 2024 · 297f5b9 · 297f5b9
2 parents e3624fe + 0cf5bb8
commit 297f5b9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/app/components/PaymentForm.tsx b/app/components/PaymentForm.tsx
@@ -59,7 +59,9 @@ const PaymentForm = (properties: PaymentFormProperties) => {
             value={"Debit/Credit Card"}
             className="h-5 w-5 border bg-white checked:border-primary checked:accent-primary"
           />
-          <label htmlFor="">Debit/Credit Card</label>
+          <label htmlFor="" className="text-gray-600">
+            Debit/Credit Card
+          </label>
         </div>
         <hr />
         <div className="flex gap-2 p-3">
@@ -70,7 +72,9 @@ const PaymentForm = (properties: PaymentFormProperties) => {
             value={"Paypal"}
             className="h-5 w-5 border accent-primary checked:bg-white"
           />
-          <label htmlFor="">Paypal</label>
+          <label htmlFor="" className="text-gray-600">
+            Paypal
+          </label>
         </div>
       </div>
       <div className="mb-4">
@@ -158,6 +162,13 @@ const PaymentForm = (properties: PaymentFormProperties) => {
       </div>
       <div>
         <Button className="m-auto w-full">Confirm and Pay</Button>
+        <small className="text-gray-800">
+          Your subscription will renew automatically every month as one payment
+          of $800. <br />
+          Cancel it anytime from your subscription settings. By clicking
+          &quot;Confirm and Pay&quot;, you agree to the
+          <span className="text-primary"> Terms and Conditions</span>
+        </small>
       </div>
     </form>
   );

diff --git a/app/root.tsx b/app/root.tsx
@@ -9,7 +9,6 @@ import {
 } from "@remix-run/react";
 import type { ReactNode } from "react";
 
-import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar";
 import styles from "./styles/global.css?url";
 
 export const links: LinksFunction = () => [
@@ -28,7 +27,6 @@ export function Layout({ children }: { children: ReactNode }) {
       </head>
       <body>
         <div className="flex">
-          <AdminSideNavBar />
           <main className="flex-1">{children}</main>,
           <ScrollRestoration />
           <Scripts />

diff --git a/app/routes/pricing.payment.tsx b/app/routes/pricing.payment.tsx
@@ -16,7 +16,7 @@ const Payment = () => {
         <div className="mx-auto flex w-10/12 flex-col gap-6 py-[5%] md:flex-row md:justify-between">
           <div className="w-full">
             <h2 className="mb-4">Order Details</h2>
-            <div className="w-full rounded bg-[#fff] px-6 py-3">
+            <div className="w-full rounded bg-[#ffffff] px-6 py-3">
               <h2 className="text-lg font-semibold">Basic Plan</h2>
               <div className="flex justify-between leading-loose md:w-full">
                 <span className="leading-loose">Monthly Subscription</span>