Merge pull request #639 from peanutprotocol/fix/tailwind-configs

fix: remove bruddle config & use single tailwind config
peanutprotocol · Jan 21, 2025 · 417efea · 417efea
2 parents cfc3270 + 2a6181e
commit 417efea
Show file tree

Hide file tree

Showing 85 changed files with 827 additions and 935 deletions.
diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx
@@ -5,6 +5,7 @@ import { useToast } from '@/components/0_Bruddle/Toast'
 import Modal from '@/components/Global/Modal'
 import WalletNavigation from '@/components/Global/WalletNavigation'
 import HomeWaitlist from '@/components/Home/HomeWaitlist'
+import { ThemeProvider } from '@/config'
 import { peanutWalletIsInPreview } from '@/constants'
 import { useAuth } from '@/context/authContext'
 import { useZeroDev } from '@/hooks/useZeroDev'
@@ -14,8 +15,7 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
-import '../../styles/globals.bruddle.css'
-import { ThemeProvider } from '@/config'
+import '../../styles/globals.css'
 
 const publicPathRegex = /^\/(request\/pay|claim)/
 

diff --git a/src/app/(setup)/layout.tsx b/src/app/(setup)/layout.tsx
@@ -5,7 +5,7 @@ import { useAppDispatch } from '@/redux/hooks'
 import { setupActions } from '@/redux/slices/setup-slice'
 import { useEffect } from 'react'
 import { setupSteps } from '../../components/Setup/Setup.consts'
-import '../../styles/globals.bruddle.css'
+import '../../styles/globals.css'
 
 const SetupLayout = ({ children }: { children?: React.ReactNode }) => {
     const dispatch = useAppDispatch()

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,10 @@
 'use client'
 
-import { useState, useEffect } from 'react'
 import * as assets from '@/assets'
 import Layout from '@/components/Global/Layout'
-import { Hero, FAQs, Features, Mike, Story, BuildOnUs } from '@/components/LandingPage'
+import { BuildOnUs, FAQs, Features, Hero, Mike, Story } from '@/components/LandingPage'
 import { useFooterVisibility } from '@/context/footerVisibility'
+import { useEffect, useState } from 'react'
 
 export default function LandingPage() {
     const hero = {
@@ -154,7 +154,7 @@ export default function LandingPage() {
             <BuildOnUs />
             <Story marquee={story.marquee} />
             <Features sections={[features.sections[1]]} marquee={features.marquee} />
-            <div className="bg-pink-1">
+            <div className="bg-primary-1">
                 <Mike lines={mike.lines} />
             </div>
         </Layout>

diff --git a/src/assets/bg/peanut-bg.svg b/src/assets/bg/peanut-bg.svg
diff --git a/src/components/0_Bruddle/Button.tsx b/src/components/0_Bruddle/Button.tsx
@@ -24,7 +24,7 @@ const buttonVariants: Record<ButtonVariant, string> = {
     'transparent-light': 'btn-transparent-light',
     'transparent-dark': 'btn-transparent-dark',
     green: 'bg-green-1',
-    yellow: 'bg-yellow-1',
+    yellow: 'bg-secondary-1',
 }
 
 const buttonSizes: Record<ButtonSize, string> = {
@@ -64,7 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref
     ) => {
         const buttonClasses = twMerge(
-            'btn w-full',
+            'btn w-full flex items-center gap-2',
             buttonVariants[variant],
             size && buttonSizes[size],
             shape === 'square' && 'btn-square',

diff --git a/src/components/0_Bruddle/Card.tsx b/src/components/0_Bruddle/Card.tsx
@@ -47,13 +47,13 @@ const Header = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivE
 )
 
 const Title = ({ children, className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h3 className={twMerge('text-h4 font-semibold sm:text-h3', className)} {...props}>
+    <h3 className={twMerge('pb-1 text-start text-h4 font-semibold sm:text-h3', className)} {...props}>
         {children}
     </h3>
 )
 
 const Description = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
-    <p className={twMerge('text-sm text-gray-600 dark:text-gray-400', className)} {...props}>
+    <p className={twMerge('text-start text-sm text-gray-600 dark:text-gray-400', className)} {...props}>
         {children}
     </p>
 )

diff --git a/src/components/0_Bruddle/Field.tsx b/src/components/0_Bruddle/Field.tsx
@@ -1,10 +1,9 @@
 'use client'
 
-import Icon, { IconNameType } from '../Global/Icon'
-import { useFormContext } from 'react-hook-form'
 import classNames from 'classnames'
-import React from 'react'
-import { DetailedHTMLProps, InputHTMLAttributes, useState } from 'react'
+import React, { DetailedHTMLProps, InputHTMLAttributes, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import Icon, { IconNameType } from '../Global/Icon'
 import BaseInput from './BaseInput'
 
 type FieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
@@ -34,7 +33,7 @@ export const Field = React.forwardRef(
                                 {
                                     'pr-15': icon || type === 'password',
                                     '!border-green-1 pr-15': success,
-                                    '!border-pink-1 pr-15': error,
+                                    '!border-primary-1 pr-15': error,
                                 },
                                 className
                             )}
@@ -62,7 +61,7 @@ export const Field = React.forwardRef(
                         {(success || error) && (
                             <Icon
                                 className={`icon-20 pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 ${
-                                    success ? 'fill-green-1' : 'fill-pink-1'
+                                    success ? 'fill-green-1' : 'fill-primary-1'
                                 }`}
                                 name={success ? 'check-circle' : 'info-circle'}
                             />

diff --git a/src/components/0_Bruddle/Title.tsx b/src/components/0_Bruddle/Title.tsx
@@ -10,10 +10,10 @@ const Title = ({
 } & React.HTMLAttributes<HTMLParagraphElement>) => {
     return (
         <div className="relative inline-block">
-            <p className={twMerge('font-knerd-filled relative text-white', offset && 'translate-x-[3px]', className)}>
+            <p className={twMerge('relative font-knerd-filled text-white', offset && 'translate-x-[3px]', className)}>
                 {text}
             </p>
-            <p className={twMerge('font-knerd-outline absolute left-0 top-0', className)}>{text}</p>
+            <p className={twMerge('absolute left-0 top-0 font-knerd-outline', className)}>{text}</p>
         </div>
     )
 }

diff --git a/src/components/About/index.tsx b/src/components/About/index.tsx
@@ -1,6 +1,6 @@
 import * as assets from '@/assets'
-import { MarqueeComp } from '../Global/MarqueeWrapper'
 import { SmileStars } from '@/assets'
+import { MarqueeComp } from '../Global/MarqueeWrapper'
 
 const listItems = [
     {
@@ -20,7 +20,7 @@ const listItems = [
             { name: 'Lens', url: 'https://lenster.xyz/u/hugo0.lens' },
             { name: 'www', url: 'https://hugomontenegro.com/' },
         ],
-        bg: 'bg-purple-1',
+        bg: 'bg-primary-1',
     },
     {
         name: 'Konrad Urban',
@@ -37,7 +37,7 @@ const listItems = [
             { name: 'Lens', url: 'https://lenster.xyz/u/kkonrad.lens' },
             { name: 'www', url: 'https://kkonrad.com/' },
         ],
-        bg: 'bg-yellow-1',
+        bg: 'bg-secondary-1',
     },
     {
         name: '______ ______',
@@ -51,7 +51,7 @@ const listItems = [
             { name: 'dm us', url: 'https://www.peanut.to/jobs' },
             { name: 'jobs', url: '/jobs' },
         ],
-        bg: 'bg-pink-1',
+        bg: 'bg-primary-1',
     },
 ]
 

diff --git a/src/components/Cashout/CashoutStatus.tsx b/src/components/Cashout/CashoutStatus.tsx
@@ -1,11 +1,10 @@
 'use client'
-import { useEffect, useState } from 'react'
 import * as assets from '@/assets'
-import { generateKeysFromString } from '@squirrel-labs/peanut-sdk'
 import * as utils from '@/utils'
 import Link from 'next/link'
-import Icon from '../Global/Icon'
+import { useEffect, useState } from 'react'
 import { Card } from '../0_Bruddle'
+import Icon from '../Global/Icon'
 
 export const CashoutStatus = () => {
     const [cashoutStatus, setCashoutStatus] = useState<'FOUND' | 'NOT FOUND' | undefined>(undefined)
@@ -47,7 +46,7 @@ export const CashoutStatus = () => {
                 <Card.Title></Card.Title>
             </Card.Header>
             {cashoutStatus === 'FOUND' ? (
-                <div className="mx-auto flex max-w-[96%] flex-col items-center justify-center gap-4 pb-20 text-center">
+                <div className="mx-auto flex max-w-[96%] flex-col items-center justify-center gap-4 pb-20 text-start">
                     <label className="text-h2">Cashout status</label>
                     <div className="flex flex-col justify-center gap-3">
                         <label className="text-start text-h8 font-light">

diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx
@@ -261,14 +261,13 @@ export const InitialCashoutView = ({
             <FlowHeader />
             <Card className="shadow-none sm:shadow-primary-4">
                 <Card.Header>
-                    <Card.Title className="mx-auto text-center">Cash Out</Card.Title>
-                    <Card.Description className="mx-auto text-center">
+                    <Card.Title>Cash Out</Card.Title>
+                    <Card.Description>
                         Cash out your crypto to your bank account. Works best with popular stablecoins and other
                         commonly traded tokens.
                     </Card.Description>
-                    <div className="mx-auto">
-                        <FAQComponent />
-                    </div>
+
+                    <FAQComponent />
                 </Card.Header>
                 <Card.Content className="col gap-2">
                     <TokenAmountInput
@@ -303,7 +302,10 @@ export const InitialCashoutView = ({
                         </>
                     )}
                     <div className="flex w-full flex-col justify-center gap-4">
-                        <RecipientInfoComponent />
+                        {!!user &&
+                            !!user.accounts.filter(
+                                (account) => account.account_type === 'iban' || account.account_type === 'us'
+                            ).length && <RecipientInfoComponent />}
                         <div className="space-y-4">
                             {!user && isFetchingUser ? (
                                 <div className="relative flex h-16 w-full items-center justify-center">
@@ -317,7 +319,7 @@ export const InitialCashoutView = ({
                                     {!!user.accounts.filter(
                                         (account) => account.account_type === 'iban' || account.account_type === 'us'
                                     ).length && (
-                                        <div className="flex w-full flex-col items-start justify-center gap-2 text-center">
+                                        <div className="flex w-full flex-col items-start justify-center gap-2">
                                             <label className="text-left text-h8 font-light">
                                                 Your linked bank accounts:
                                             </label>
@@ -332,7 +334,7 @@ export const InitialCashoutView = ({
                                                         className={twMerge(
                                                             'flex w-full items-center  justify-between text-nowrap border border-black p-2',
                                                             matchAccount(account, bankAccountNumber)
-                                                                ? 'bg-purple-1'
+                                                                ? 'bg-primary-1'
                                                                 : 'hover:bg-gray-100',
                                                             xchainAllowed && 'cursor-pointer',
                                                             !xchainAllowed && 'opacity-60'
@@ -344,7 +346,7 @@ export const InitialCashoutView = ({
                                                         <div className="flex flex-grow items-center overflow-hidden">
                                                             <Icon
                                                                 name={'bank'}
-                                                                className="mr-2 h-4 flex-shrink-0 fill-gray-1"
+                                                                className="mr-2 h-4 flex-shrink-0 fill-grey-1"
                                                             />
                                                             <label
                                                                 htmlFor={`bank-${index}`}
@@ -436,7 +438,7 @@ export const InitialCashoutView = ({
                         {!isConnected && !isPeanutWallet ? 'Connect Wallet' : isLoading ? loadingState : 'Proceed'}
                     </Button>
                     {errorState.showError && (
-                        <div className="text-center">
+                        <div className="text-start">
                             <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                         </div>
                     )}
@@ -452,7 +454,7 @@ export const InitialCashoutView = ({
                         </span>
                     )}
                     {!xchainAllowed && (
-                        <span className=" text-h8 font-normal ">
+                        <span className="text-start text-h8 font-normal">
                             <Icon name="warning" className="-mt-0.5" /> You cannot cashout on this chain.
                         </span>
                     )}

diff --git a/src/components/Claim/Generic/AlreadyClaimed.view.tsx b/src/components/Claim/Generic/AlreadyClaimed.view.tsx
@@ -26,11 +26,11 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
             </Card.Header>
             <Card.Content className="flex flex-col gap-2">
                 {dataAvailable && (
-                    <div className="flex w-full flex-col items-center justify-center gap-2">
-                        <label className="text-h8 ">This link previously contained:</label>
+                    <div className="flex w-full flex-col items-start justify-center gap-2 py-2">
+                        <label className="text-h8">This link previously contained:</label>
                         {tokenSymbolAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
-                                <div className="flex w-max  flex-row items-center justify-center gap-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 text-h8  text-grey-1">
+                                <div className="flex w-max flex-row items-center justify-center gap-1 px-2">
                                     <label className="font-bold">Token</label>
                                 </div>
                                 <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4">
@@ -39,7 +39,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                             </div>
                         )}
                         {tokenAmountAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8  text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Amount</label>
                                 </div>
@@ -49,7 +49,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                             </div>
                         )}
                         {chainAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8  text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Chain</label>
                                 </div>
@@ -67,7 +67,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                             </div>
                         )}
                         {senderAddressAvailable && (
-                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1">
+                            <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8  text-grey-1">
                                 <div className="flex w-max  flex-row items-center justify-center gap-1">
                                     <label className="font-bold">Sender</label>
                                 </div>
@@ -78,7 +78,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter
                         )}
                     </div>
                 )}
-                <label className="text-center text-h9 font-normal">
+                <label className="text-start text-h9 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a
                         className="cursor-pointer text-black underline dark:text-white"

diff --git a/src/components/Claim/Generic/SenderClaim.view.tsx b/src/components/Claim/Generic/SenderClaim.view.tsx
@@ -82,7 +82,7 @@ export const SenderClaimLinkView = ({
                     Go to recipient view
                 </Button>
                 {errorState.showError && (
-                    <div className="text-center">
+                    <div className="text-start">
                         <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label>
                     </div>
                 )}

diff --git a/src/components/Claim/Generic/WrongPassword.view.tsx b/src/components/Claim/Generic/WrongPassword.view.tsx
@@ -7,13 +7,11 @@ import { PaymentsFooter } from '@/components/Global/PaymentsFooter'
 export const WrongPasswordClaimLink = () => {
     return (
         <Card className="space-y-3 shadow-none sm:shadow-primary-4">
-            <Card.Header className="mx-auto space-y-2">
-                <Card.Title className="mx-auto text-center">Sorryyy</Card.Title>
-                <Card.Description className="mx-auto text-center">
-                    This link is malformed. Are you sure you copied it correctly?
-                </Card.Description>
+            <Card.Header className="space-y-2">
+                <Card.Title>Sorryyy</Card.Title>
+                <Card.Description>This link is malformed. Are you sure you copied it correctly?</Card.Description>
             </Card.Header>
-            <Card.Content className="mx-auto space-y-2 text-center">
+            <Card.Content className="space-y-2 text-start">
                 <div className="block text-h8 font-normal">
                     We would like to hear from your experience. Hit us up on{' '}
                     <a className="text-link-decoration" target="_blank" href="https://discord.gg/BX9Ak7AW28">