feat: Enhance Boutique (#1817)

* Enhance Boutique

* Update Menu.tsx

packages/boutique/frontend/src/app/checkout/components/pay-button.tsx

@@ -1,4 +1,4 @@
-import { OpenPaymentsMark } from '@/components/icons.tsx'
+import { PayWithInterledgerMark } from '@/components/icons.tsx'
 import { Button, ButtonProps } from '@/components/ui/button.tsx'
 import { cn } from '@/lib/utils.ts'
 
@@ -8,8 +8,8 @@ export interface PayButtonProps
 export const PayButton = ({ className, ...props }: PayButtonProps) => {
   return (
     <Button type="submit" className={cn(className)} aria-label="pay" {...props}>
-      <OpenPaymentsMark className="h-8 w-8 mr-2" />
-      <span className="text-xl">Pay</span>
+      <span className="text-md">Pay with</span>
+      <PayWithInterledgerMark className="h-8 w-40 mr-2" />
     </Button>
   )
 }

packages/boutique/frontend/src/app/checkout/components/payment-methods.tsx

@@ -1,4 +1,8 @@
-import { OpenPaymentsMark } from '@/components/icons.tsx'
+import {
+  ApplePayMark,
+  GooglePayMark,
+  OpenPaymentsMark
+} from '@/components/icons.tsx'
 import { Form } from '@/components/ui/form/form.tsx'
 import { InputField } from '@/components/ui/form/input-field.tsx'
 import {
@@ -27,10 +31,23 @@ export const PaymentMethods = () => {
       <TabsList>
         <TabsTrigger
           value="open-payments"
-          className="space-x-2 hover:underline dark:hover:no-underline dark:hover:shadow-glow-button"
+          className="space-x-2 hover:underline dark:hover:no-underline dark:hover:border-pink-neon"
+        >
+          <OpenPaymentsMark width={120} height={40} />
+        </TabsTrigger>
+        <TabsTrigger
+          value="open-payments"
+          className="space-x-2 hover:underline dark:hover:no-underline"
+          disabled
+        >
+          <ApplePayMark width={80} height={40} />
+        </TabsTrigger>
+        <TabsTrigger
+          value="open-payments"
+          className="space-x-2 hover:underline dark:hover:no-underline"
+          disabled
         >
-          <OpenPaymentsMark width={32} height={32} />
-          <span className="text-sm">Open Payments</span>
+          <GooglePayMark width={120} height={40} />
         </TabsTrigger>
       </TabsList>
       <TabsContent value="open-payments">

packages/boutique/frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 
 export const buttonVariants = cva(
   [
-    'inline-flex items-center justify-center outline-none border-2 underline decoration-transparent underline-offset-2 transition-[box-shadow,background-color,text-decoration-color,color] duration-200 ease-in-out hover:decoration-[currentcolor] focus:decoration-[currentcolor] dark:hover:shadow-glow-button dark:focus:shadow-glow-button disabled:decoration-none disabled:bg-grey-light disabled:text-grey-dark disabled:cursor-not-allowed disabled:hover:shadow-none dark:disabled:decoration-none dark:disabled:bg-grey-light dark:disabled:text-grey-dark dark:disabled:cursor-not-allowed dark:disabled:hover:shadow-none'
+    'inline-flex items-center justify-center outline-none border-2 underline dark:no-underline decoration-transparent underline-offset-2 transition-[box-shadow,background-color,text-decoration-color,color] duration-200 ease-in-out hover:decoration-[currentcolor] focus:decoration-[currentcolor] dark:hover:shadow-glow-button dark:focus:shadow-glow-button disabled:decoration-none disabled:bg-grey-light disabled:text-grey-dark disabled:cursor-not-allowed disabled:hover:shadow-none dark:decoration-none dark:disabled:decoration-none dark:disabled:bg-grey-light dark:disabled:text-grey-dark dark:disabled:cursor-not-allowed dark:disabled:hover:shadow-none'
   ],
   {
     variants: {

packages/boutique/frontend/src/components/ui/tabs.tsx

@@ -26,7 +26,7 @@ const TabsTrigger = forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md border border-gray-300 p-1 text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green dark:focus-visible:ring-green-neon disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border data-[state=active]:border-green dark:data-[state=active]:border-pink-neon data-[state=active]:shadow',
+      'inline-flex w-40 items-center justify-center whitespace-nowrap rounded-md border p-1 mr-3 text-sm transition-all focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-80 bg-white',
       className
     )}
     {...props}

packages/wallet/frontend/src/components/Menu.tsx

@@ -259,7 +259,11 @@ export const Menu = () => {
             className="group mb-4 rounded-md border border-transparent p-2 focus:border-black dark:focus:border-white dark:focus:shadow-glow-link"
             href="/"
           >
-            <LogoWallet className="w-48 py-4 text-black transition-transform duration-200 group-hover:scale-105 group-focus:scale-105 dark:text-white dark:group-hover:scale-100 dark:group-hover:drop-shadow-glow-svg dark:group-focus:scale-100 dark:group-focus:drop-shadow-glow-svg" />
+            {FEATURES_ENABLED ? (
+              <LogoWallet className="w-48 py-4 text-black transition-transform duration-200 group-hover:scale-105 group-focus:scale-105 dark:text-white dark:group-hover:scale-100 dark:group-hover:drop-shadow-glow-svg dark:group-focus:scale-100 dark:group-focus:drop-shadow-glow-svg" />
+            ) : (
+              <Logo className="w-48 py-4 text-black transition-transform duration-200 group-hover:scale-105 group-focus:scale-105 dark:text-white dark:group-hover:scale-100 dark:group-hover:drop-shadow-glow-svg dark:group-focus:scale-100 dark:group-focus:drop-shadow-glow-svg" />
+            )}
           </Link>
           <div className="w-full space-y-4">
             {menuItems.map(({ name, href, id, Icon }) => (

packages/wallet/frontend/src/pages/grant-interactions/index.tsx

@@ -11,7 +11,8 @@ import { useDialog } from '@/lib/hooks/useDialog'
 import { ErrorDialog } from '@/components/dialogs/ErrorDialog'
 import { useRouter } from 'next/router'
 import { GrantResponse } from '@wallet/shared'
-import { THEME } from '@/utils/constants'
+import { FEATURES_ENABLED, THEME } from '@/utils/constants'
+import { Logo, LogoWallet } from '@/ui/Logo'
 
 type GrantInteractionPageProps = InferGetServerSidePropsType<
   typeof getServerSideProps
@@ -52,7 +53,12 @@ const GrantInteractionPage = ({
 
   return isPendingGrant ? (
     <div className="col-span-full m-auto my-28 px-5 text-center md:px-0">
-      <div className="max-w-xl rounded-xl border-2 border-pink-dark dark:border-teal-neon px-5 py-10 shadow-lg">
+      <div className="max-w-xl rounded-xl border-2 border-pink-dark dark:border-teal-neon px-5 py-10 shadow-lg flex items-center flex-col">
+        {FEATURES_ENABLED ? (
+          <LogoWallet className="h-14 ml-5 mb-16"></LogoWallet>
+        ) : (
+          <Logo className="h-14 ml-5 mb-16" />
+        )}
         <Image
           className="mx-auto object-cover"
           src={imageName}