Css refactor (#432)

* display section clean * foot section * main section * final cleans
solana-labs · Jul 16, 2023 · 1fdc926 · 1fdc926 · vercel · Jul 17, 2023
1 parent 7fde5f6
commit 1fdc926
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 77 deletions.
diff --git a/apps/payment-ui/src/components/DisplaySection.tsx b/apps/payment-ui/src/components/DisplaySection.tsx
@@ -6,24 +6,25 @@ import { useSelector } from 'react-redux';
 const DisplaySection = () => {
     const paymentDetails = useSelector(getPaymentDetails);
 
+    const handleBackButtonClick = () => {
+        if (paymentDetails?.cancelUrl) {
+            window.location.href = paymentDetails.cancelUrl;
+        }
+    };
+
     return (
-        <div className="grid grid-cols-3 w-full max-w-xl">
-            <div className="flex flex-row">
-                <button
-                    className="btn btn-ghost z-10"
-                    onClick={() => {
-                        if (paymentDetails?.cancelUrl != null) {
-                            window.location.href = paymentDetails.cancelUrl;
-                        }
-                    }}
-                >
-                    <MdArrowBack color="white" size={30} />
-                </button>
-            </div>
-            <div className="flex flex-col mx-auto my-auto">
-                <Image src="/solana-pay.svg" alt="Solana Pay Logo" width={80} height={200} />
+        <div className="w-full max-w-xl mx-auto">
+            <div className="container mx-auto">
+                <div className="grid grid-cols-3 h-16 py-2 font-black text-white text-2xl">
+                    <button className="btn btn-ghost z-10" onClick={handleBackButtonClick}>
+                        <MdArrowBack color="white" size={30} />
+                    </button>
+                    <div className="flex flex-col mx-auto my-auto">
+                        <Image src="/solana-pay.svg" alt="Solana Pay Logo" width={80} height={200} />
+                    </div>
+                    <div />
+                </div>
             </div>
-            <div className="flex flex-col"></div>
         </div>
     );
 };

diff --git a/apps/payment-ui/src/components/FooterSection.tsx b/apps/payment-ui/src/components/FooterSection.tsx
@@ -16,19 +16,22 @@ const FooterSection = () => {
     const isSolanaPayNotification = useSelector(getIsSolanaPayNotification);
     const connectedWalletNotification = useSelector(getConnectWalletNotification);
 
-    if (paymentMethod == 'connect-wallet' && mergedState == MergedState.start) {
-        return <PayWithWalletSection />;
-    } else if (paymentMethod == 'qr-code' && isSolanaPayNotification) {
-        return <SolanaPayErrorView />;
-    } else if (
+    const isPayWithWalletSection = () => paymentMethod == 'connect-wallet' && mergedState == MergedState.start;
+    const isSolanaPayErrorView = () => paymentMethod == 'qr-code' && isSolanaPayNotification;
+    const isCancelTransactionButton = () =>
         mergedState > MergedState.start &&
         mergedState < MergedState.completed &&
-        connectedWalletNotification != Notification.declined
-    ) {
-        return <CancelTransactionButton />;
-    } else {
-        return <div></div>;
-    }
+        connectedWalletNotification != Notification.declined;
+
+    return (
+        <div className="w-full">
+            <div className="container h-36 mx-auto px-4 sm:px-20 bg-white text-white text-center max-w-2xl">
+                {isPayWithWalletSection() && <PayWithWalletSection />}
+                {isSolanaPayErrorView() && <SolanaPayErrorView />}
+                {isCancelTransactionButton() && <CancelTransactionButton />}
+            </div>
+        </div>
+    );
 };
 
 export default FooterSection;
diff --git a/apps/payment-ui/src/components/MainSection.tsx b/apps/payment-ui/src/components/MainSection.tsx
@@ -1,27 +1,19 @@
-import { BlockedProps } from '@/pages';
 import { useRouter } from 'next/router';
-import React, { ReactNode } from 'react';
 import CheckoutSection from './CheckoutSection';
 
-interface CheckoutWrapperProps {
-    children: ReactNode;
-}
-
-const CheckoutWrapper: React.FC<CheckoutWrapperProps> = ({ children }) => {
-    return <div className="flex flex-grow flex-col h-full">{children}</div>;
-};
-
-const MainSection = (props: BlockedProps) => {
+const MainSection = () => {
     const router = useRouter();
 
     if (!router.isReady) {
         return <div>Loading...</div>;
     }
 
     return (
-        <CheckoutWrapper>
-            <CheckoutSection />
-        </CheckoutWrapper>
+        <div className="flex flex-col flex-auto">
+            <div className="flex-grow container mx-auto bg-white rounded-t-2xl max-w-2xl px-4 sm:px-20">
+                <CheckoutSection />
+            </div>
+        </div>
     );
 };
 

diff --git a/apps/payment-ui/src/pages/_document.tsx b/apps/payment-ui/src/pages/_document.tsx
@@ -4,7 +4,11 @@ class MyDocument extends Document {
     render() {
         return (
             <Html lang="en">
-                <Head />
+                <Head>
+                    <title>Solana Pay Payment Portal</title>
+                    <meta name="description" content="Use Solana Pay for your Shopify Checkout" />
+                    <link rel="icon" href="/favicon.ico" />
+                </Head>
                 <body>
                     <Main />
                     <NextScript />

diff --git a/apps/payment-ui/src/pages/index.tsx b/apps/payment-ui/src/pages/index.tsx
@@ -1,10 +1,6 @@
 import FooterSection from '@/components/FooterSection';
-import { getPaymentMethod } from '@/features/payment-options/paymentOptionsSlice';
-import { getMergedState } from '@/features/payment-session/paymentSessionSlice';
 import { GetServerSideProps, GetServerSidePropsContext } from 'next';
-import Head from 'next/head';
 import React from 'react';
-import { useSelector } from 'react-redux';
 import DisplaySection from '../components/DisplaySection';
 import MainSection from '../components/MainSection';
 
@@ -16,41 +12,14 @@ export const getServerSideProps: GetServerSideProps = async (context: GetServerS
     };
 };
 
-export type BlockedProps = {
-    isBlocked: string;
-    country: string;
-};
-
-export default function Home({ isBlocked, country }: BlockedProps) {
-    const paymentMethod = useSelector(getPaymentMethod);
-    const mergedState = useSelector(getMergedState);
-
+export default function Home() {
     return (
         <>
-            <Head>
-                <title>Solana Pay Payment Portal</title>
-                <meta name="description" content="Use Solana Pay for your Shopify Checkout" />
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
             <React.Fragment>
                 <div className="flex flex-col h-screen bg-black">
-                    <div className="w-full max-w-xl mx-auto">
-                        <div className="container mx-auto">
-                            <div className="block h-16 py-2 font-black text-white text-2xl max-w-xl">
-                                <DisplaySection />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="flex flex-col flex-auto bg-black">
-                        <div className="flex-grow container mx-auto bg-white rounded-t-2xl max-w-2xl px-4 sm:px-20">
-                            <MainSection isBlocked={'false'} country={'usa'} />
-                        </div>
-                    </div>
-                    <div className="w-full bg-black">
-                        <div className="container h-36 mx-auto px-4 sm:px-20 bg-white text-white text-center max-w-2xl">
-                            <FooterSection />
-                        </div>
-                    </div>
+                    <DisplaySection />
+                    <MainSection />
+                    <FooterSection />
                 </div>
             </React.Fragment>
         </>