add some styling and move to deposit modal

2023-12-06 22:28:13 +11:00 · 2023-12-06 22:28:13 +11:00 · e8b6d9f81d
parent 0563123f3d
commit e8b6d9f81d
11 changed files with 245 additions and 213 deletions
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@ -42,7 +42,6 @@ import FormatNumericValue from './shared/FormatNumericValue'
 import { useRouter } from 'next/router'
 import TopBarStore from '@store/topBarStore'
 import MedalIcon from './icons/MedalIcon'
-import BridgeModal from './modals/BridgeModal'

 export const TOPBAR_ICON_BUTTON_CLASSES =
  'relative flex h-16 w-10 sm:w-16 items-center justify-center sm:border-l sm:border-th-bkg-3 focus-visible:bg-th-bkg-3 md:hover:bg-th-bkg-2'
@ -72,7 +71,6 @@ const TopBar = () => {
  const [showDepositWithdrawModal, setShowDepositWithdrawModal] =
    useState(false)
  const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
-  const [showBridgeModal, setShowBridgeModal] = useState(false)
  const { showSettingsModal, setShowSettingsModal } = TopBarStore()
  const isOnline = useOnlineStatus()

@ -274,15 +272,6 @@ const TopBar = () => {
              </button>
            </div>
          )}
-          <div className="h-[63px] bg-th-bkg-1">
-            <button
-              className={TOPBAR_ICON_BUTTON_CLASSES}
-              title="Bridge assets from another chain"
-              onClick={() => setShowBridgeModal(true)}
-            >
-              <span className="px-2">Bridge</span>
-            </button>
-          </div>
          <div className="h-[63px] bg-th-bkg-1">
            <button
              className={TOPBAR_ICON_BUTTON_CLASSES}
@ -323,9 +312,6 @@ const TopBar = () => {
          onClose={() => setShowCreateAccountModal(false)}
        />
      ) : null}
-      {showBridgeModal ? (
-        <BridgeModal isOpen={true} onClose={() => setShowBridgeModal(false)} />
-      ) : null}
      {showSettingsModal ? (
        <SettingsModal
          isOpen={showSettingsModal}
--- a/components/modals/BridgeModal.tsx
+++ b/components/modals/BridgeModal.tsx
@ -1,156 +1,168 @@
+import useThemeWrapper from 'hooks/useThemeWrapper'
 import { ModalProps } from '../../types/modal'
 import Modal from '../shared/Modal'
 import WormholeBridge from '@wormhole-foundation/wormhole-connect'
+import { COLORS } from 'styles/colors'

 const BridgeModal = ({ isOpen, onClose }: ModalProps) => {
+  const { theme } = useThemeWrapper()
  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      panelClassNames="sm:max-w-xl"
-      disableOutsideClose
-    >
-      <div className="-mb-2 rounded border border-th-bkg-2 p-4 text-th-fgd-1">
-        Use Wormhole to bridge tokens from another chain to Solana, you can then
-        deposit your tokens on Mango as collateral.
-      </div>
-      <div className="thin-scroll max-h-[800px] overflow-y-scroll">
-        <WormholeBridge
-          config={{
-            env: 'mainnet',
-            rpcs: {
-              solana: 'https://mango.rpcpool.com/946ef7337da3f5b8d3e4a34e7f88',
-            },
-            customTheme: {
-              primary: {
-                '50': '#fafafa',
-                '100': '#f5f5f5',
-                '200': '#eeeeee',
-                '300': '#e0e0e0',
-                '400': '#bdbdbd',
-                '500': '#9e9e9e',
-                '600': '#757575',
-                '700': '#616161',
-                '800': '#424242',
-                '900': '#212121',
-                A100: '#f5f5f5',
-                A200: '#eeeeee',
-                A400: '#bdbdbd',
-                A700: '#616161',
-              },
-              secondary: {
-                '50': '#fafafa',
-                '100': '#f5f5f5',
-                '200': '#eeeeee',
-                '300': '#e0e0e0',
-                '400': '#bdbdbd',
-                '500': '#9e9e9e',
-                '600': '#757575',
-                '700': '#616161',
-                '800': '#424242',
-                '900': '#212121',
-                A100: '#f5f5f5',
-                A200: '#eeeeee',
-                A400: '#bdbdbd',
-                A700: '#616161',
-              },
-              divider: '#ffffff33',
-              background: { default: 'transparent' },
-              text: { primary: '#ffffff', secondary: '#9e9e9e' },
-              error: {
-                '50': '#ffebee',
-                '100': '#ffcdd2',
-                '200': '#ef9a9a',
-                '300': '#e57373',
-                '400': '#ef5350',
-                '500': '#f44336',
-                '600': '#e53935',
-                '700': '#d32f2f',
-                '800': '#c62828',
-                '900': '#b71c1c',
-                A100: '#ff8a80',
-                A200: '#ff5252',
-                A400: '#ff1744',
-                A700: '#d50000',
-              },
-              info: {
-                '50': '#97a5b7',
-                '100': '#8293a9',
-                '200': '#6e819a',
-                '300': '#596f8c',
-                '400': '#445d7e',
-                '500': '#304C70',
-                '600': '#2b4464',
-                '700': '#263c59',
-                '800': '#21354e',
-                '900': '#1c2d43',
-                A100: '#304C70',
-                A200: '#304C70',
-                A400: '#304C70',
-                A700: '#304C70',
-              },
-              success: {
-                '50': '#66d6cd',
-                '100': '#4dcfc4',
-                '200': '#33c8bc',
-                '300': '#1ac1b4',
-                '400': '#01BBAC',
-                '500': '#00a89a',
-                '600': '#009589',
-                '700': '#008278',
-                '800': '#007067',
-                '900': '#005d56',
-                A100: '#00a89a',
-                A200: '#00a89a',
-                A400: '#00a89a',
-                A700: '#00a89a',
-              },
-              warning: {
-                '50': '#ffe3a4',
-                '100': '#ffdd91',
-                '200': '#ffd77f',
-                '300': '#ffd26d',
-                '400': '#ffcc5b',
-                '500': '#FFC749',
-                '600': '#e5b341',
-                '700': '#cc9f3a',
-                '800': '#b28b33',
-                '900': '#99772b',
-                A100: '#FFC749',
-                A200: '#FFC749',
-                A400: '#FFC749',
-                A700: '#FFC749',
-              },
-              button: {
-                primary: '#ffffff19',
-                primaryText: '#ffffff',
-                disabled: '#ffffff0F',
-                disabledText: '#ffffff66',
-                action: '#ffffff',
-                actionText: '#000000',
-                hover: '#ffffff0F',
-              },
-              options: { hover: '#ffffff0F', select: '#ffffff19' },
-              card: {
-                background: '#ffffff0C',
-                secondary: '#ffffff0C',
-                elevation: 'none',
-              },
-              popover: {
-                background: '#1b2033',
-                secondary: '#ffffff0C',
-                elevation: 'none',
-              },
-              modal: { background: 'rgba(28, 25, 37, 1)' },
-              font: {
-                primary: '"Inter", sans-serif',
-                header: '"IBM Plex Mono", monospace',
-              },
-            },
-            bridgeDefaults: { fromNetwork: 'ethereum', toNetwork: 'solana' },
-            showHamburgerMenu: false,
-          }}
-        />
+    <Modal isOpen={isOpen} onClose={onClose} disableOutsideClose fullScreen>
+      <div className="thin-scroll max-h-screen overflow-y-auto">
+        <div className="mx-auto max-w-xl">
+          <div className="mx-auto mt-8 text-center">
+            <h2 className="mb-2">Wormhole Bridge</h2>
+            <p>
+              Bridge tokens from another chain to your Solana wallet. You can
+              then deposit them into your Mango account.
+            </p>
+          </div>
+          <div>
+            <WormholeBridge
+              config={{
+                env: 'mainnet',
+                rpcs: {
+                  solana:
+                    'https://mango.rpcpool.com/946ef7337da3f5b8d3e4a34e7f88',
+                },
+                customTheme: {
+                  primary: {
+                    '50': '#fafafa',
+                    '100': '#f5f5f5',
+                    '200': '#eeeeee',
+                    '300': '#e0e0e0',
+                    '400': '#bdbdbd',
+                    '500': '#9e9e9e',
+                    '600': '#757575',
+                    '700': '#616161',
+                    '800': '#424242',
+                    '900': '#212121',
+                    A100: '#f5f5f5',
+                    A200: '#eeeeee',
+                    A400: '#bdbdbd',
+                    A700: '#616161',
+                  },
+                  secondary: {
+                    '50': '#fafafa',
+                    '100': '#f5f5f5',
+                    '200': '#eeeeee',
+                    '300': '#e0e0e0',
+                    '400': '#bdbdbd',
+                    '500': '#9e9e9e',
+                    '600': '#757575',
+                    '700': '#616161',
+                    '800': '#424242',
+                    '900': '#212121',
+                    A100: '#f5f5f5',
+                    A200: '#eeeeee',
+                    A400: '#bdbdbd',
+                    A700: '#616161',
+                  },
+                  divider: '#ffffff33',
+                  background: { default: 'transparent' },
+                  text: {
+                    primary: COLORS.FGD1[theme],
+                    secondary: 'var(--fgd-3)',
+                  },
+                  error: {
+                    '50': '#ffebee',
+                    '100': '#ffcdd2',
+                    '200': '#ef9a9a',
+                    '300': '#e57373',
+                    '400': '#ef5350',
+                    '500': '#f44336',
+                    '600': '#e53935',
+                    '700': '#d32f2f',
+                    '800': '#c62828',
+                    '900': '#b71c1c',
+                    A100: '#ff8a80',
+                    A200: '#ff5252',
+                    A400: '#ff1744',
+                    A700: '#d50000',
+                  },
+                  info: {
+                    '50': '#97a5b7',
+                    '100': '#8293a9',
+                    '200': '#6e819a',
+                    '300': '#596f8c',
+                    '400': '#445d7e',
+                    '500': '#00000019',
+                    '600': '#2b4464',
+                    '700': '#263c59',
+                    '800': '#21354e',
+                    '900': '#1c2d43',
+                    A100: '#8293a9',
+                    A200: '#6e819a',
+                    A400: '#445d7e',
+                    A700: '#263c59',
+                  },
+                  success: {
+                    '50': '#66d6cd',
+                    '100': '#4dcfc4',
+                    '200': '#33c8bc',
+                    '300': '#1ac1b4',
+                    '400': '#01BBAC',
+                    '500': '#00a89a',
+                    '600': '#009589',
+                    '700': '#008278',
+                    '800': '#007067',
+                    '900': '#005d56',
+                    A100: '#00a89a',
+                    A200: '#00a89a',
+                    A400: '#00a89a',
+                    A700: '#00a89a',
+                  },
+                  warning: {
+                    '50': '#ffe3a4',
+                    '100': '#ffdd91',
+                    '200': '#ffd77f',
+                    '300': '#ffd26d',
+                    '400': '#ffcc5b',
+                    '500': '#FFC749',
+                    '600': '#e5b341',
+                    '700': '#cc9f3a',
+                    '800': '#b28b33',
+                    '900': '#99772b',
+                    A100: '#FFC749',
+                    A200: '#FFC749',
+                    A400: '#FFC749',
+                    A700: '#FFC749',
+                  },
+                  button: {
+                    primary: COLORS.BUTTON[theme],
+                    primaryText: COLORS.FGD1[theme],
+                    disabled: '#ffffff0F',
+                    disabledText: '#ffffff66',
+                    action: COLORS.BUTTON[theme],
+                    actionText: COLORS.FGD1[theme],
+                    hover: 'rgba(0,0,0,0.1)',
+                  },
+                  options: { hover: '#ffffff0F', select: '#ffffff19' },
+                  card: {
+                    background: COLORS.BKG2[theme],
+                    secondary: COLORS.BKG3[theme],
+                    elevation: 'none',
+                  },
+                  popover: {
+                    background: COLORS.BKG1[theme],
+                    secondary: '#ffffff0C',
+                    elevation: 'none',
+                  },
+                  modal: { background: COLORS.BKG1[theme] },
+                  font: {
+                    primary: 'var(--font-body)',
+                    header: 'var(--font-display)',
+                  },
+                },
+                bridgeDefaults: {
+                  fromNetwork: 'ethereum',
+                  toNetwork: 'solana',
+                },
+                showHamburgerMenu: false,
+              }}
+            />
+          </div>
+        </div>
      </div>
    </Modal>
  )
--- a/components/modals/DepositWithdrawModal.tsx
+++ b/components/modals/DepositWithdrawModal.tsx
@ -8,6 +8,9 @@ import { ACCOUNT_ACTION_MODAL_HEIGHT } from 'utils/constants'
 import mangoStore from '@store/mangoStore'
 import { useWallet } from '@solana/wallet-adapter-react'
 import useUnownedAccount from 'hooks/useUnownedAccount'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import BridgeModal from './BridgeModal'
+import { useTranslation } from 'react-i18next'

 interface DepositWithdrawModalProps {
  action: 'deposit' | 'withdraw'
@ -22,7 +25,9 @@ const DepositWithdrawModal = ({
  onClose,
  token,
 }: ModalCombinedProps) => {
+  const { t } = useTranslation('common')
  const [activeTab, setActiveTab] = useState(action)
+  const [showBridgeModal, setShowBridgeModal] = useState(false)
  const { publicKey: walletPk } = useWallet()
  const { isDelegatedAccount } = useUnownedAccount()

@ -33,33 +38,50 @@ const DepositWithdrawModal = ({
  }, [walletPk])

  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <div style={{ height: ACCOUNT_ACTION_MODAL_HEIGHT }}>
-        {!isDelegatedAccount ? (
-          <>
-            <div className="pb-2">
-              <TabUnderline
-                activeValue={activeTab}
-                values={['deposit', 'withdraw']}
-                onChange={(v) => setActiveTab(v)}
-              />
+    <>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <div style={{ height: ACCOUNT_ACTION_MODAL_HEIGHT }}>
+          {!isDelegatedAccount ? (
+            <>
+              <div className="pb-2">
+                <TabUnderline
+                  activeValue={activeTab}
+                  values={['deposit', 'withdraw']}
+                  onChange={(v) => setActiveTab(v)}
+                />
+              </div>
+              {activeTab === 'deposit' ? (
+                <DepositForm onSuccess={onClose} token={token} />
+              ) : null}
+              {activeTab === 'withdraw' ? (
+                <WithdrawForm onSuccess={onClose} token={token} />
+              ) : null}
+            </>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <div className="text-th-fgd-4">
+                Unavailable for delegate accounts
+              </div>
            </div>
-            {activeTab === 'deposit' ? (
-              <DepositForm onSuccess={onClose} token={token} />
-            ) : null}
-            {activeTab === 'withdraw' ? (
-              <WithdrawForm onSuccess={onClose} token={token} />
-            ) : null}
-          </>
-        ) : (
-          <div className="flex h-full w-full items-center justify-center">
-            <div className="text-th-fgd-4">
-              Unavailable for delegate accounts
-            </div>
-          </div>
-        )}
-      </div>
-    </Modal>
+          )}
+        </div>
+        {activeTab === 'deposit' ? (
+          <button
+            className="mt-4 flex w-full items-center justify-between rounded-md border border-th-bkg-4 px-4 py-2 text-left font-bold text-th-fgd-2 focus:outline-none md:hover:border-th-fgd-4"
+            onClick={() => setShowBridgeModal(true)}
+          >
+            <span>{t('bridge-wormhole')}</span>
+            <ChevronRightIcon className="h-5 w-5" />
+          </button>
+        ) : null}
+      </Modal>
+      {showBridgeModal ? (
+        <BridgeModal
+          isOpen={showBridgeModal}
+          onClose={() => setShowBridgeModal(false)}
+        />
+      ) : null}
+    </>
  )
 }

--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -34,6 +34,7 @@
  "borrow-fee": "Borrow Fee",
  "borrow-funds": "Borrow Funds",
  "borrow-rate": "Borrow APR",
+  "bridge-wormhole": "Bridge from another chain via Wormhole",
  "buy": "Buy",
  "cancel": "Cancel",
  "chart-unavailable": "Chart Unavailable",
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@ -34,6 +34,7 @@
  "borrow-fee": "Borrow Fee",
  "borrow-funds": "Borrow Funds",
  "borrow-rate": "Borrow APR",
+  "bridge-wormhole": "Bridge from another chain via Wormhole",
  "buy": "Buy",
  "cancel": "Cancel",
  "chart-unavailable": "Chart Unavailable",
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@ -34,6 +34,7 @@
  "borrow-fee": "Borrow Fee",
  "borrow-funds": "Borrow Funds",
  "borrow-rate": "Borrow APR",
+  "bridge-wormhole": "Bridge from another chain via Wormhole",
  "buy": "Buy",
  "cancel": "Cancel",
  "chart-unavailable": "Chart Unavailable",
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@ -34,6 +34,7 @@
  "borrow-fee": "借贷费用",
  "borrow-funds": "进行借贷",
  "borrow-rate": "借贷APR",
+  "bridge-wormhole": "Bridge from another chain via Wormhole",
  "buy": "买",
  "cancel": "取消",
  "chart-unavailable": "无法显示图表",
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@ -34,6 +34,7 @@
  "borrow-fee": "借貸費用",
  "borrow-funds": "進行借貸",
  "borrow-rate": "借貸APR",
+  "bridge-wormhole": "Bridge from another chain via Wormhole",
  "buy": "買",
  "cancel": "取消",
  "chart-unavailable": "無法顯示圖表",
--- a/styles/colors.ts
+++ b/styles/colors.ts
@ -55,6 +55,20 @@ export const COLORS: Record<string, Record<string, string>> = {
    Bonk: '#DDA131',
    Pepe: '#51833F',
  },
+  FGD1: {
+    'Mango Classic': '#E6E4EC',
+    Dark: '#d1d1d1',
+    Light: '#141414',
+    'High Contrast': '#fff',
+    Avocado: '#EAF1EA',
+    Medium: '#ccc',
+    Blueberry: '#EEF2FC',
+    Banana: '#272720',
+    Lychee: '#54181B',
+    Olive: '#F3F1DD',
+    Bonk: '#FFFEFA',
+    Pepe: '#F0F7EE',
+  },
  FGD4: {
    'Mango Classic': '#9189ae',
    Dark: '#858585',
@ -69,6 +83,20 @@ export const COLORS: Record<string, Record<string, string>> = {
    Bonk: '#F3E9AA',
    Pepe: '#88BD75',
  },
+  BUTTON: {
+    'Mango Classic': '#794CA9',
+    Dark: '#616161',
+    Light: '#d6d6d6',
+    'High Contrast': '#F3FA19',
+    Avocado: '#1E674A',
+    Medium: '#6e6e6e',
+    Blueberry: '#0A4ED6',
+    Banana: '#FBE774',
+    Lychee: '#EBADB1',
+    Olive: '#7F7A62',
+    Bonk: '#AC5039',
+    Pepe: '#338415',
+  },
  UP: {
    'Mango Classic': '#89B92A',
    Dark: '#4aa13a',
--- a/utils/constants.ts
+++ b/utils/constants.ts
@ -106,9 +106,9 @@ export const MIN_SOL_BALANCE = 0.001

 export const MAX_PRIORITY_FEE_KEYS = 128

-export const ACCOUNT_ACTION_MODAL_HEIGHT = '488px'
+export const ACCOUNT_ACTION_MODAL_HEIGHT = '498px'

-export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '426px'
+export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '436px'

 export const TRADE_VOLUME_ALERT_KEY = 'tradeVolumeAlert-0.1'

--- a/yarn.lock
+++ b/yarn.lock
@ -17,14 +17,7 @@
  resolved "https://registry.yarnpkg.com/@apocentre/alias-sampling/-/alias-sampling-0.5.3.tgz#897ff181b48ad7b2bcb4ecf29400214888244f08"
  integrity sha512-7UDWIIF9hIeJqfKXkNIzkVandlwLf1FWTSdrb9iXvOP8oF544JRXQjCbiTmCv2c9n44n/FIWtehhBfNuAx2CZA==

-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.4.tgz#36fa1d2b36db873d25ec631dcc4923fdc1cf2e2e"
-  integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
-"@babel/runtime@^7.23.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
  version "7.23.5"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
  integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
@ -2768,12 +2761,7 @@
  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==

-"@types/prop-types@*":
-  version "15.7.5"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
-  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
-
-"@types/prop-types@^15.7.11":
+"@types/prop-types@*", "@types/prop-types@^15.7.11":
  version "15.7.11"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
@ -7433,7 +7421,7 @@ postcss@8.4.12:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-postcss@8.4.31:
+postcss@8.4.31, postcss@^8.4.23, postcss@^8.4.4:
  version "8.4.31"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@ -7442,15 +7430,6 @@ postcss@8.4.31:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-postcss@^8.4.23, postcss@^8.4.4:
-  version "8.4.29"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
-  integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 preact@10.4.1:
  version "10.4.1"
  resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"