From bbb374bdb56acde8197c08f01b414831db57c4e9 Mon Sep 17 00:00:00 2001 From: Timea <117268143+Tymmmy@users.noreply.github.com> Date: Wed, 13 Nov 2024 14:48:05 +0200 Subject: [PATCH] feat: Enhance Boutique (#1817) * Enhance Boutique * Update Menu.tsx --- .../app/checkout/components/pay-button.tsx | 6 +- .../checkout/components/payment-methods.tsx | 25 ++- .../frontend/src/components/icons.tsx | 203 ++++++++++++++++-- .../frontend/src/components/ui/button.tsx | 2 +- .../frontend/src/components/ui/tabs.tsx | 2 +- .../wallet/frontend/src/components/Menu.tsx | 6 +- .../src/pages/grant-interactions/index.tsx | 10 +- 7 files changed, 222 insertions(+), 32 deletions(-) diff --git a/packages/boutique/frontend/src/app/checkout/components/pay-button.tsx b/packages/boutique/frontend/src/app/checkout/components/pay-button.tsx index f319008ef..93039d6ad 100644 --- a/packages/boutique/frontend/src/app/checkout/components/pay-button.tsx +++ b/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 ( ) } diff --git a/packages/boutique/frontend/src/app/checkout/components/payment-methods.tsx b/packages/boutique/frontend/src/app/checkout/components/payment-methods.tsx index 9bc1ccb1c..2ee2826bf 100644 --- a/packages/boutique/frontend/src/app/checkout/components/payment-methods.tsx +++ b/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 = () => { + + + + + + - - Open Payments + diff --git a/packages/boutique/frontend/src/components/icons.tsx b/packages/boutique/frontend/src/components/icons.tsx index 747697fc2..57742c1b2 100644 --- a/packages/boutique/frontend/src/components/icons.tsx +++ b/packages/boutique/frontend/src/components/icons.tsx @@ -150,32 +150,195 @@ export const OpenPaymentsLogo = (props: SVGProps) => { export const OpenPaymentsMark = (props: SVGProps) => { return ( - - Open Payments icon (black/white) + + + + + + + + + + + + + + + + + + + ) +} + +export const PayWithInterledgerMark = (props: SVGProps) => { + return ( + + + fill="#fff" + d="M114.969 252.76c-22.546 0-44.512-7.092-62.985-20.514-21.841-15.868-36.805-39.177-42.13-65.631l5.69-1.144c5.035 25.018 19.194 47.066 39.85 62.072 20.861 15.155 46.444 21.775 72.026 18.639l.705 5.765c-4.397.539-8.793.805-13.165.805l.009.008Z" + /> + + + + + + + + + + + + + + + + ) +} + +export const ApplePayMark = (props: SVGProps) => { + return ( + + + + ) +} + +export const GooglePayMark = (props: SVGProps) => { + return ( + + fill="#5f6368" + d="M37.8 19.7V29h-3V6h7.8c1.9 0 3.7.7 5.1 2 1.4 1.2 2.1 3 2.1 4.9 0 1.9-.7 3.6-2.1 4.9-1.4 1.3-3.1 2-5.1 2l-4.8-.1zm0-10.9v8h5c1.1 0 2.2-.4 2.9-1.2 1.6-1.5 1.6-4 .1-5.5l-.1-.1c-.8-.8-1.8-1.3-2.9-1.2h-5zm18.9 4c2.2 0 3.9.6 5.2 1.8s1.9 2.8 1.9 4.8V29H61v-2.2h-.1c-1.2 1.8-2.9 2.7-4.9 2.7-1.7 0-3.2-.5-4.4-1.5-1.1-1-1.8-2.4-1.8-3.9 0-1.6.6-2.9 1.8-3.9 1.2-1 2.9-1.4 4.9-1.4 1.8 0 3.2.3 4.3 1v-.7c0-1-.4-2-1.2-2.6-.8-.7-1.8-1.1-2.9-1.1-1.7 0-3 .7-3.9 2.1l-2.6-1.6c1.6-2.1 3.7-3.1 6.5-3.1zm-3.8 11.4c0 .8.4 1.5 1 1.9.7.5 1.5.8 2.3.8 1.2 0 2.4-.5 3.3-1.4 1-.9 1.5-2 1.5-3.2-.9-.7-2.2-1.1-3.9-1.1-1.2 0-2.2.3-3 .9-.8.5-1.2 1.2-1.2 2.1zM80 13.3 70.1 36h-3l3.7-7.9-6.5-14.7h3.2l4.7 11.3h.1l4.6-11.3H80z" + /> + fill="#4285f4" + d="M25.9 17.7c0-.9-.1-1.8-.2-2.7H13.2v5.1h7.1c-.3 1.6-1.2 3.1-2.6 4v3.3H22c2.5-2.3 3.9-5.7 3.9-9.7z" + /> + fill="#34a853" + d="M13.2 30.6c3.6 0 6.6-1.2 8.8-3.2l-4.3-3.3c-1.2.8-2.7 1.3-4.5 1.3-3.4 0-6.4-2.3-7.4-5.5H1.4v3.4c2.3 4.5 6.8 7.3 11.8 7.3z" + /> + fill="#fbbc04" + d="M5.8 19.9c-.6-1.6-.6-3.4 0-5.1v-3.4H1.4c-1.9 3.7-1.9 8.1 0 11.9l4.4-3.4z" + /> + fill="#ea4335" + d="M13.2 9.4c1.9 0 3.7.7 5.1 2l3.8-3.8c-2.4-2.2-5.6-3.5-8.8-3.4-5 0-9.6 2.8-11.8 7.3l4.4 3.4c.9-3.2 3.9-5.5 7.3-5.5z" + /> ) } diff --git a/packages/boutique/frontend/src/components/ui/button.tsx b/packages/boutique/frontend/src/components/ui/button.tsx index 3d2b31a59..37f6edd07 100644 --- a/packages/boutique/frontend/src/components/ui/button.tsx +++ b/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: { diff --git a/packages/boutique/frontend/src/components/ui/tabs.tsx b/packages/boutique/frontend/src/components/ui/tabs.tsx index a22137f06..159c0a102 100644 --- a/packages/boutique/frontend/src/components/ui/tabs.tsx +++ b/packages/boutique/frontend/src/components/ui/tabs.tsx @@ -26,7 +26,7 @@ const TabsTrigger = forwardRef< { className="group mb-4 rounded-md border border-transparent p-2 focus:border-black dark:focus:border-white dark:focus:shadow-glow-link" href="/" > - + {FEATURES_ENABLED ? ( + + ) : ( + + )}
{menuItems.map(({ name, href, id, Icon }) => ( diff --git a/packages/wallet/frontend/src/pages/grant-interactions/index.tsx b/packages/wallet/frontend/src/pages/grant-interactions/index.tsx index 10ea15645..fa7b029b5 100644 --- a/packages/wallet/frontend/src/pages/grant-interactions/index.tsx +++ b/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 ? (
-
+
+ {FEATURES_ENABLED ? ( + + ) : ( + + )}