Set E-Mode Category
-
+
E-Mode allows you to borrow assets belonging to the selected category.
+
{eModeCategoryName}
Option activated
diff --git a/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx b/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx
index 74ed6e349..08c27cd8c 100644
--- a/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx
+++ b/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.tsx
@@ -31,7 +31,7 @@ export function SandboxDialogView({
+
Sandbox Mode is a risk-free environment where you can test the Spark App and understand how it works. When
you're ready, you can switch back to the real world. Have fun exploring!
@@ -42,7 +42,7 @@ export function SandboxDialogView({
'No real assets involved',
'Fast – no need to sign transactions',
].map((item, index) => (
-
+
diff --git a/packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx b/packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx
index 4c61051ff..0132808e9 100644
--- a/packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx
+++ b/packages/app/src/features/dialogs/savings/deposit/components/BenefitsDialog.tsx
@@ -31,7 +31,7 @@ export function BenefitsDialog({ portalContainerRef, apyImprovement }: BenefitsD
Deposit into Savings USDS
-
+
By enabling this option, you will be depositing your stablecoins into Savings USDS, thus accessing the SSR
(Sky Savings Rate), which provides the highest predictable rate in USDS. You can exit Savings USDS at any
time at your sole discretion.
diff --git a/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx b/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx
index 7f84bb214..8365962b5 100644
--- a/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx
+++ b/packages/app/src/features/dialogs/savings/deposit/components/UpgradeToSusdsSwitch.tsx
@@ -23,7 +23,7 @@ export function UpgradeToSusdsSwitch({
-
+
Deposit into Savings USDS and get{' '}
{apyImprovement ? (
{formatPercentage(apyImprovement)} higher APY
diff --git a/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx b/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
index d1b3d4408..417b052e7 100644
--- a/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
+++ b/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
@@ -116,7 +116,7 @@ export const WithSUSDSSwitchMobile = getMobileStory(WithSUSDSSwitch)
export const WithSUSDSSwitchTablet = getTabletStory(WithSUSDSSwitch)
export const WithBenefitsDrawerOpened: Story = {
- decorators: [WithWrappingDialog()],
+ decorators: [WithWrappingDialog(), WithClassname('min-h-[900px]')],
args: {
savingsUsdsSwitchInfo: {
showSwitch: true,
diff --git a/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx b/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx
index e807c3bb6..5b54e2aa6 100644
--- a/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx
+++ b/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.tsx
@@ -41,7 +41,7 @@ export function DowngradeUSDSToDaiView({
Downgrade {fromToken.symbol} to {toToken.symbol}
-
+
You can downgrade from USDS to DAI whenever you choose, and you are free to switch back from DAI to USDS in the
future, at your own sole discretion.{' '}
diff --git a/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx b/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx
index fa5edb156..3e87e0761 100644
--- a/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx
+++ b/packages/app/src/features/dialogs/savings/withdraw/components/form/AddressInput.tsx
@@ -15,11 +15,11 @@ export const AddressInput = forwardRef
(
({ error, blockExplorerUrl, label, ...rest }, ref) => {
return (
- {label &&
{label}
}
+ {label &&
{label}
}
(
{error && (
{error}
diff --git a/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx b/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx
index 42fde84f5..b960d4e66 100644
--- a/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx
+++ b/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.tsx
@@ -28,7 +28,7 @@ export function SuccessView({ tokenToWithdraw, closeDialog, sendModeExtension }:
Recipient
)}
diff --git a/packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx b/packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx
index aa478c34e..7621944af 100644
--- a/packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx
+++ b/packages/app/src/features/dialogs/select-network/components/NetworkStatusBadge.tsx
@@ -21,7 +21,7 @@ export function NetworkStatusBadge({ status }: NetworkStatusBadgeProps) {
return (
)
}
diff --git a/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx b/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx
index 4761c4cc1..de7f37b5e 100644
--- a/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx
+++ b/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.tsx
@@ -32,7 +32,7 @@ export function SelectNetworkDialogView({ chains }: SelectNetworkDialogViewProps
key={chain.name}
>
-
+
{chain.name}
@@ -42,7 +42,7 @@ export function SelectNetworkDialogView({ chains }: SelectNetworkDialogViewProps
) : undefined}
-
+
Network available for: {chain.supportedPages.join(', ')}
diff --git a/packages/app/src/features/easy-borrow/components/form/Borrow.tsx b/packages/app/src/features/easy-borrow/components/form/Borrow.tsx
index f59b6bac9..f6e753138 100644
--- a/packages/app/src/features/easy-borrow/components/form/Borrow.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/Borrow.tsx
@@ -38,7 +38,7 @@ export function Borrow({
-
Borrow
+
Borrow
{pageStatus.state === 'confirmation' && (
)}
diff --git a/packages/app/src/features/easy-borrow/components/form/Deposits.tsx b/packages/app/src/features/easy-borrow/components/form/Deposits.tsx
index 7e3d83dcc..acef5cf3d 100644
--- a/packages/app/src/features/easy-borrow/components/form/Deposits.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/Deposits.tsx
@@ -47,7 +47,7 @@ export function Deposits({
-
Deposit
+
Deposit
Some assets (e.g., isolated assets) are only accessible via the{' '}
-
+
Loan to Value (LTV)
{formatPercentage(ltv)}
-
+
Ratio of the collateral value to the borrowed value
-
max. {formatPercentage(maxLtv)}
+
max. {formatPercentage(maxLtv)}
diff --git a/packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx b/packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx
index faa6912a3..de84a8d93 100644
--- a/packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/LoanToValueSlider.tsx
@@ -69,7 +69,7 @@ export function LoanToValueSlider({
isLast && '-ml-0.5 -mr-1 rounded-e-full',
)}
>
-
@@ -95,7 +95,7 @@ export function LoanToValueSlider({
left: `${(maxSelectableValue / maxSliderValue) * 100}%`,
}}
/>
-
+
{formatPercentage(liquidationLtv)}
diff --git a/packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx b/packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx
index a748d3b2a..610670aef 100644
--- a/packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx
+++ b/packages/app/src/features/easy-borrow/components/form/TokenSummary.tsx
@@ -20,7 +20,7 @@ export function TokenSummary({ position, type, maxSymbols = 3 }: TokenSummaryPro
return (
)
}
diff --git a/packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx b/packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx
index a16bef42d..0bb770c6d 100644
--- a/packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx
+++ b/packages/app/src/features/easy-borrow/components/side-panel/EasyBorrowSidePanel.tsx
@@ -20,7 +20,7 @@ export function EasyBorrowSidePanel({ hf, liquidationDetails, borrowRate, dai, u
)}
- Borrow Rate
+ Borrow Rate
{formatPercentage(borrowRate, { skipSign: true })}%
-
+
Borrow {dai}
{usds ? ` or ${usds}` : ''} directly from SKY
diff --git a/packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx b/packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx
index 1dd7af9a2..aaf9560aa 100644
--- a/packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx
+++ b/packages/app/src/features/farm-details/components/farm-info-panel/active/ActiveFarmInfoPanel.tsx
@@ -101,19 +101,19 @@ export function ActiveFarmInfoPanel({
{farm.depositors && (
-
+
{farm.depositors}
)}
-
+
{USD_MOCK_TOKEN.formatUSD(farm.totalSupply, { compact: true })}
{farm.apy?.gt(0) && (
}>
-
+
{formatPercentage(farm.apy, { minimumFractionDigits: 0 })}
@@ -121,7 +121,7 @@ export function ActiveFarmInfoPanel({
{rewardToken.unitPriceUsd.gt(0) && (
-
+
≈
{rewardToken.formatUSD(currentReward)}
diff --git a/packages/app/src/features/farm-details/components/farm-info-panel/common/DetailsItem.tsx b/packages/app/src/features/farm-details/components/farm-info-panel/common/DetailsItem.tsx
index f08eaef74..70fdfef9c 100644
--- a/packages/app/src/features/farm-details/components/farm-info-panel/common/DetailsItem.tsx
+++ b/packages/app/src/features/farm-details/components/farm-info-panel/common/DetailsItem.tsx
@@ -11,7 +11,7 @@ export function DetailsItem({ title, explainer, children }: DetailsItemProps) {
diff --git a/packages/app/src/features/farm-details/components/farm-info-panel/inactive/InactiveFarmInfoPanel.tsx b/packages/app/src/features/farm-details/components/farm-info-panel/inactive/InactiveFarmInfoPanel.tsx
index 82c2e8fe0..fa7a6f7c6 100644
--- a/packages/app/src/features/farm-details/components/farm-info-panel/inactive/InactiveFarmInfoPanel.tsx
+++ b/packages/app/src/features/farm-details/components/farm-info-panel/inactive/InactiveFarmInfoPanel.tsx
@@ -44,26 +44,26 @@ export function InactiveFarmInfoPanel({
{farm.depositors && (
-
+
{farm.depositors}
)}
-
+
{USD_MOCK_TOKEN.formatUSD(farm.totalSupply, { compact: true })}
{farm.apy?.gt(0) && (
}>
-
+
{formatPercentage(farm.apy, { minimumFractionDigits: 0 })}
)}
{farm.apy?.isZero() && farm.totalRewarded && (
-
+
{farm.rewardToken.format(farm.totalRewarded, { style: 'compact' })} {farm.rewardToken.symbol}
@@ -101,7 +101,7 @@ function PointsFarmDetails({
{isChroniclePointsFarm &&
}
+
{isChroniclePointsFarm && (
Chronicle is the original oracle on Ethereum built within MakerDAO for the creation of DAI. Today,
@@ -129,11 +129,10 @@ function TokenFarmDetails({ farm, assetsGroupType }: { farm: Farm; assetsGroupTy
{' '}
in rewards
-
+
{farm.apy?.gt(0) && (
<>Deposit any of the tokens listed below and start farming {farm.rewardToken.symbol} tokens.
- )}
-
+ )}{' '}
Learn more about farming{' '}
here
diff --git a/packages/app/src/features/farm-details/components/tokens-to-deposit/TokensToDeposit.tsx b/packages/app/src/features/farm-details/components/tokens-to-deposit/TokensToDeposit.tsx
index 4762b6ede..2e1c96b76 100644
--- a/packages/app/src/features/farm-details/components/tokens-to-deposit/TokensToDeposit.tsx
+++ b/packages/app/src/features/farm-details/components/tokens-to-deposit/TokensToDeposit.tsx
@@ -22,7 +22,7 @@ export function TokensToDeposit({ assets, openStakeDialog }: TokensToDepositProp
header: 'Balance',
headerAlign: 'right',
renderCell: ({ balance, token }) => (
-
+
{balance.eq(0) ? '-' : token.format(balance, { style: 'auto' })}
),
diff --git a/packages/app/src/features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx b/packages/app/src/features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx
index 6208600d0..da82d1acd 100644
--- a/packages/app/src/features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx
+++ b/packages/app/src/features/farm-details/dialogs/unstake/components/claim-rewards-switch/ExitFarmSwitch.tsx
@@ -20,11 +20,11 @@ export function ExitFarmSwitch({ checked, onSwitch, reward }: UpgradeToSusdsSwit
-
+
Withdraw and claim rewards in one transaction
~{rewardAmount} {reward.token.symbol} {reward.token.unitPriceUsd.gt(0) && `(~${rewardUsdValue})`}
diff --git a/packages/app/src/features/farms/components/farm-tile/FarmTile.tsx b/packages/app/src/features/farms/components/farm-tile/FarmTile.tsx
index e4f4b0442..cf000601c 100644
--- a/packages/app/src/features/farms/components/farm-tile/FarmTile.tsx
+++ b/packages/app/src/features/farms/components/farm-tile/FarmTile.tsx
@@ -63,7 +63,7 @@ export function FarmTile({
-
+
Deposit {entryAssetsGroup.name}
@@ -71,7 +71,7 @@ export function FarmTile({
{apy?.gt(0) && (
<>
-
APY
+
APY
{staked.gt(0) ? (
<>
-
Tokens deposited:
-
+
Tokens deposited:
+
{stakingToken.format(staked, { style: 'auto' })} {' '}
{stakingToken.symbol}
@@ -93,7 +93,7 @@ export function FarmTile({
) : (
<>
-
Tokens to deposit:
+
Tokens to deposit:
)}
diff --git a/packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx b/packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx
index bbb9402f9..0fcc6e030 100644
--- a/packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx
+++ b/packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx
@@ -57,11 +57,11 @@ export function InterestYieldChart({
-
Borrow APY
+
Borrow APY
-
Utilization Rate
+
Utilization Rate
diff --git a/packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx b/packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx
index d555e4158..bbbf67bbd 100644
--- a/packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx
+++ b/packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx
@@ -208,7 +208,7 @@ function Chart({
function TooltipContent({ data }: { data: GraphDataPoint }) {
return (
-
+
Utilization Rate:
Borrow APY:
diff --git a/packages/app/src/features/market-details/components/debt-ceiling-progress/DebtCeilingProgress.tsx b/packages/app/src/features/market-details/components/debt-ceiling-progress/DebtCeilingProgress.tsx
index ff8338fdc..d0fe586a9 100644
--- a/packages/app/src/features/market-details/components/debt-ceiling-progress/DebtCeilingProgress.tsx
+++ b/packages/app/src/features/market-details/components/debt-ceiling-progress/DebtCeilingProgress.tsx
@@ -22,7 +22,7 @@ export function DebtCeilingProgress({ debt, debtCeiling }: DebtCeilingProgressPr
-
Isolated Debt Ceiling
+
Isolated Debt Ceiling
Debt ceiling limits the amount possible to borrow against this asset by protocol users. Debt ceiling is
specific to assets in isolation mode and is denoted in USD.{' '}
@@ -31,7 +31,7 @@ export function DebtCeilingProgress({ debt, debtCeiling }: DebtCeilingProgressPr
-
+
{children}
+ return
{children}
}
function Value({ children, 'data-testid': dataTestId, className }: InfoTileProps) {
return (
-
{children}
+
{children}
)
}
@@ -46,7 +46,7 @@ function LegendItemBadge({ variant }: { variant: LegendItemVariant }) {
return (
-
{badgeText}
+
{badgeText}
)
}
diff --git a/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx b/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx
index f398051cf..75f259e27 100644
--- a/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx
+++ b/packages/app/src/features/market-details/components/my-wallet/MyWalletChainMismatch.tsx
@@ -4,7 +4,7 @@ export function MyWalletChainMismatch() {
return (
My Wallet
-
+
To access this asset, please switch your wallet connection to the appropriate chain.
diff --git a/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx b/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx
index adcacf753..912269e9c 100644
--- a/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx
+++ b/packages/app/src/features/market-details/components/my-wallet/components/ActionDetails.tsx
@@ -10,11 +10,11 @@ interface ActionDetailsProps {
export function ActionDetails({ label, token, value }: ActionDetailsProps) {
return (
-
{label}
-
+
{label}
+
{token.format(value, { style: 'auto' })} {token.symbol}
-
{token.formatUSD(value)}
+
{token.formatUSD(value)}
)
}
diff --git a/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx b/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx
index e104b614d..7f2bed53f 100644
--- a/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx
+++ b/packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx
@@ -34,7 +34,7 @@ export function BorrowRow({ token, availableToBorrow, eligibility, onAction }: B
function InfoWrapper({ children }: { children: React.ReactNode }) {
return (
-
{children}
+
{children}
)
}
diff --git a/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx b/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx
index 6ebc27742..568396207 100644
--- a/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx
+++ b/packages/app/src/features/market-details/components/my-wallet/components/TokenBalance.tsx
@@ -11,10 +11,10 @@ interface TokenBalanceProps {
export function TokenBalance({ token, balance }: TokenBalanceProps) {
return (
-
Balance:
+
Balance:
-
+
{token.format(balance, { style: 'auto' })} {token.symbol}
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx
index c75961296..107574ee2 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx
@@ -10,9 +10,9 @@ export function FixedOraclePanel({ chainId, price, priceOracleAddress, token }:
return (
-
Oracle type
+
Oracle type
-
Fixed Price
+
Fixed Price
The asset price is set by a contract at a predefined value, adjustable only through Sky governance
decisions.
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/MarketOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/MarketOraclePanel.tsx
index 3ecd4ed3b..b54899183 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/MarketOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/MarketOraclePanel.tsx
@@ -11,9 +11,9 @@ export function MarketOraclePanel({ providedBy, chainId, price, priceOracleAddre
return (
-
Oracle type
+
Oracle type
-
+
Market Price {providedBy.length > 1 && (Redundant) }
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx
index cf8e2aa44..d831f2d65 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/ProvidersList.tsx
@@ -10,7 +10,7 @@ interface ProvidersListProps {
export function ProvidersList({ providers }: ProvidersListProps) {
return (
-
Provided by
+
Provided by
-
Oracle type
+
Oracle type
-
Underlying Asset Price
+
Underlying Asset Price
The asset price is derived from a market price oracle tracking the value of the underlying asset. Sky
Governance controls which oracle is used.
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/UnknownOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/UnknownOraclePanel.tsx
index 0706de101..6e7c77311 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/UnknownOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/UnknownOraclePanel.tsx
@@ -9,7 +9,7 @@ export function UnknownOraclePanel({ chainId, token, price, priceOracleAddress }
return (
-
Oracle
+ Oracle
diff --git a/packages/app/src/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx b/packages/app/src/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx
index c78f3fb98..fb7f8fe26 100644
--- a/packages/app/src/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx
+++ b/packages/app/src/features/market-details/components/oracle-panel/components/YieldingFixedOraclePanel.tsx
@@ -24,9 +24,9 @@ export function YieldingFixedOraclePanel({
return (
-
Oracle type
+
Oracle type
-
+
Yielding Fixed Price {providedBy.length > 1 && (Redundant) }
@@ -39,36 +39,36 @@ export function YieldingFixedOraclePanel({
{ratio.toFixed(4)}
-
+
{token.symbol} to {baseAssetSymbol} Ratio
{formatUSDPriceWithPrecision(baseAssetPrice)}
-
+
{baseAssetSymbol} Oracle Price
{formatUSDPriceWithPrecision(price)}
-
Final Price
+
Final Price
@@ -77,6 +77,7 @@ export function YieldingFixedOraclePanel({
Ratio Contract
Oracle Contract
Price Contract
-
Eligible for Spark Airdrop
-
+
Eligible for Spark Airdrop
+
{eligibleToken} {participants} will be eligible for a future ⚡ SPK airdrop. Please read the details on
the{' '}
+
E-Mode for {categoryName} assets increases your LTV within the {categoryName} category. This means that when
E-Mode is enabled, you will have higher borrowing power for assets in this category:{' '}
{eModeCategoryTokens.join(', ')}. You can enter E-Mode from your{' '}
diff --git a/packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx b/packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx
index 89340645d..0a35f9704 100644
--- a/packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx
+++ b/packages/app/src/features/market-details/components/status-panel/components/Subheader.tsx
@@ -16,7 +16,7 @@ export function Subheader({ status }: SubheaderProps) {
In Isolation Mode you can only borrow stablecoins up to the debt ceiling and cannot use any other asset as
collateral.{' '}
- {children}
}
-const variants = cva('typography-body-6', {
+const variants = cva('typography-body-4', {
variants: {
variant: {
orange: 'text-system-warning-primary',
diff --git a/packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx b/packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx
index c198cf904..bbc65a642 100644
--- a/packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx
+++ b/packages/app/src/features/market-details/views/components/TokenLinksDropdown.tsx
@@ -82,11 +82,11 @@ function TokenLinksDropdownItem({ address, token, label }: TokenLinksDropdownIte
-
-
diff --git a/packages/app/src/features/markets/components/asset-status-badge/components/AssetStatusDescription.tsx b/packages/app/src/features/markets/components/asset-status-badge/components/AssetStatusDescription.tsx
index 2d3fec268..98d6fb47d 100644
--- a/packages/app/src/features/markets/components/asset-status-badge/components/AssetStatusDescription.tsx
+++ b/packages/app/src/features/markets/components/asset-status-badge/components/AssetStatusDescription.tsx
@@ -9,7 +9,7 @@ export function AssetStatusDescription({ children }: AssetStatusDescriptionProps
return (
{icon}
-
{description}
+
{description}
)
}
diff --git a/packages/app/src/features/markets/components/markets-table/components/ApyWithRewardsCell.tsx b/packages/app/src/features/markets/components/markets-table/components/ApyWithRewardsCell.tsx
index e37e4945b..7dc287e0e 100644
--- a/packages/app/src/features/markets/components/markets-table/components/ApyWithRewardsCell.tsx
+++ b/packages/app/src/features/markets/components/markets-table/components/ApyWithRewardsCell.tsx
@@ -24,7 +24,7 @@ export function ApyWithRewardsCell({ mobileViewOptions, ...rest }: ApyWithReward
if (mobileViewOptions?.isMobileView) {
return (
-
{mobileViewOptions.rowTitle}
+
{mobileViewOptions.rowTitle}
)
@@ -72,7 +72,7 @@ function CellValue({ value, dimmed }: CellValueProps) {
return
{formatPercentage(value)}
}
-const variants = cva('typography-label-4 text-primary', {
+const variants = cva('typography-label-2 text-primary', {
variants: {
dimmed: {
true: 'text-secondary/70',
diff --git a/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx b/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx
index b17cfeec8..081767108 100644
--- a/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx
+++ b/packages/app/src/features/markets/components/markets-table/components/AssetNameCell.tsx
@@ -32,7 +32,7 @@ export function AssetNameCell({ token, reserveStatus, 'data-testid': dataTestId
)}
@@ -53,7 +53,7 @@ export function TokenName({ token, className }: TokenNameProps) {
return (
-
+
{token.name}
diff --git a/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx b/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx
index a74282f94..bf3f3b9be 100644
--- a/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx
+++ b/packages/app/src/features/markets/components/summary-tile/components/Tile.tsx
@@ -24,7 +24,7 @@ export function Tile({ icon: Icon, title, USDValue, description, 'data-testid':
Assets in your wallet supported by Spark.
-
Include deposits
+
Include deposits
diff --git a/packages/app/src/features/my-portfolio/components/position/Position.tsx b/packages/app/src/features/my-portfolio/components/position/Position.tsx
index 75381a69a..50d7ecf5e 100644
--- a/packages/app/src/features/my-portfolio/components/position/Position.tsx
+++ b/packages/app/src/features/my-portfolio/components/position/Position.tsx
@@ -59,7 +59,7 @@ function Ticks({ ticks }: TicksProps) {
{ticks.map(({ label, x }) => (
- {label &&
{label}
}
+ {label &&
{label}
}
))}
@@ -75,8 +75,8 @@ function Deposited({ positionSummary, ticks }: DepositedProps) {
return (
-
Collateral deposited
-
+
Collateral deposited
+
{getPositionFormattedValue(positionSummary?.totalCollateralUSD)}
@@ -135,8 +135,8 @@ function Borrow({ positionSummary, ticks }: BorrowProps) {
return (
-
Borrow
-
+
Borrow
+
{getPositionFormattedValue(positionSummary?.borrow.current)}
@@ -186,7 +186,7 @@ function BorrowBar({ positionSummary }: BorrowBarProps) {
className="-translate-x-[1px] absolute z-[2] h-7 border-primary border-l-2 pl-2"
style={{ left: `${borrow.percents.max}%` }}
>
-
max
+
max
You can borrow up to {USD_MOCK_TOKEN.formatUSD(positionSummary.borrow.max)}.
diff --git a/packages/app/src/features/savings/components/growing-balance/GrowingBalance.tsx b/packages/app/src/features/savings/components/growing-balance/GrowingBalance.tsx
index 6b2d93811..067fab3c4 100644
--- a/packages/app/src/features/savings/components/growing-balance/GrowingBalance.tsx
+++ b/packages/app/src/features/savings/components/growing-balance/GrowingBalance.tsx
@@ -51,7 +51,7 @@ export function GrowingBalance({
)}
{savingsTokenWithBalance.token.format(savingsTokenWithBalance.balance, { style: 'auto' })}{' '}
diff --git a/packages/app/src/features/savings/components/navbar-item/SavingsAPYBadge.tsx b/packages/app/src/features/savings/components/navbar-item/SavingsAPYBadge.tsx
index fd68ac6a8..0399f62d2 100644
--- a/packages/app/src/features/savings/components/navbar-item/SavingsAPYBadge.tsx
+++ b/packages/app/src/features/savings/components/navbar-item/SavingsAPYBadge.tsx
@@ -21,7 +21,7 @@ export function SavingsAPYBadge({ APY, isLoading, className }: SavingsAPYBadgePr
) : (
APY && (
-
+
{formatPercentage(APY, { minimumFractionDigits: 0 })}
)
diff --git a/packages/app/src/features/savings/components/savings-info-tile/SavingsInfoTile.tsx b/packages/app/src/features/savings/components/savings-info-tile/SavingsInfoTile.tsx
index f4fcf4580..6fdbb301e 100644
--- a/packages/app/src/features/savings/components/savings-info-tile/SavingsInfoTile.tsx
+++ b/packages/app/src/features/savings/components/savings-info-tile/SavingsInfoTile.tsx
@@ -21,7 +21,7 @@ interface LabelProps {
function Label({ children, tooltipContent: tooltipText }: LabelProps) {
return (
-
{children}
+
{children}
{tooltipText &&
{tooltipText} }
+
{children}
)
diff --git a/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx b/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx
index 1e8b1a027..87486c6da 100644
--- a/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx
+++ b/packages/app/src/features/savings/components/savings-opportunity/components/Explainer.tsx
@@ -29,7 +29,7 @@ export function Explainer({ stablecoinValue, savingsMeta, originChainId }: Expla
-
+
{stablecoinValue ? (
<>
You have{' '}
diff --git a/packages/app/src/features/savings/components/savings-opportunity/components/SavingsRate.tsx b/packages/app/src/features/savings/components/savings-opportunity/components/SavingsRate.tsx
index 18becc858..a53dc8184 100644
--- a/packages/app/src/features/savings/components/savings-opportunity/components/SavingsRate.tsx
+++ b/packages/app/src/features/savings/components/savings-opportunity/components/SavingsRate.tsx
@@ -16,7 +16,7 @@ export function SavingsRate({ originChainId, APY, savingsMetaItem }: SavingsRate
return (
-
{savingsMetaItem.rateAcronym} Rate
+
{savingsMetaItem.rateAcronym} Rate
diff --git a/packages/app/src/features/savings/components/stablecoins-in-wallet/StablecoinsInWallet.tsx b/packages/app/src/features/savings/components/stablecoins-in-wallet/StablecoinsInWallet.tsx
index 4f51519b3..ba7394e36 100644
--- a/packages/app/src/features/savings/components/stablecoins-in-wallet/StablecoinsInWallet.tsx
+++ b/packages/app/src/features/savings/components/stablecoins-in-wallet/StablecoinsInWallet.tsx
@@ -36,7 +36,7 @@ export function StablecoinsInWallet({
header: 'Balance',
headerAlign: 'right',
renderCell: ({ balance, token }) => (
-
+
{balance.eq(0) ? '-' : token.format(balance, { style: 'auto' })}
),
@@ -84,8 +84,8 @@ export function StablecoinsInWallet({
-
Convert stablecoins without fees and slippage!
-
+
Convert stablecoins without fees and slippage!
+
Use SKY infrastructure to convert between supported stablecoins.
diff --git a/packages/app/src/features/savings/components/stablecoins-in-wallet/components/TokenCell.tsx b/packages/app/src/features/savings/components/stablecoins-in-wallet/components/TokenCell.tsx
index b4b686c85..3e7f85c63 100644
--- a/packages/app/src/features/savings/components/stablecoins-in-wallet/components/TokenCell.tsx
+++ b/packages/app/src/features/savings/components/stablecoins-in-wallet/components/TokenCell.tsx
@@ -22,7 +22,7 @@ export function TokenCell({ token, migrationInfo }: TokenCellProps) {
}
return (
-
+
diff --git a/packages/app/src/features/savings/components/stablecoins-in-wallet/components/UpgradeTokenButton.tsx b/packages/app/src/features/savings/components/stablecoins-in-wallet/components/UpgradeTokenButton.tsx
index 567af2cf4..dfb6d6117 100644
--- a/packages/app/src/features/savings/components/stablecoins-in-wallet/components/UpgradeTokenButton.tsx
+++ b/packages/app/src/features/savings/components/stablecoins-in-wallet/components/UpgradeTokenButton.tsx
@@ -23,7 +23,7 @@ export function UpgradeTokenButton({
-
+
Upgrade your
Savings DAI to{' '}
Savings USDS
and unlock the full potential of the Sky ecosystem.
@@ -63,7 +63,7 @@ function Benefit({ children }: { children: ReactNode }) {
return (
-
{children}
+
{children}
)
}
diff --git a/packages/app/src/features/savings/components/welcome-dialog/WelcomeDialog.tsx b/packages/app/src/features/savings/components/welcome-dialog/WelcomeDialog.tsx
index 738146210..105ce0f5f 100644
--- a/packages/app/src/features/savings/components/welcome-dialog/WelcomeDialog.tsx
+++ b/packages/app/src/features/savings/components/welcome-dialog/WelcomeDialog.tsx
@@ -26,7 +26,7 @@ export function WelcomeDialog({ open, onConfirm, apyImprovement }: WelcomeDialog
/>
Welcome USDS, the new upgraded DAI!
-
+
USDS is the new version of DAI, the stablecoin that powers the Sky ecosystem. Upgrading to USDS unlocks
additional benefits, providing you with more opportunities to earn rewards within the ecosystem. The upgrade
is optional, and you can continue using DAI if you prefer.{' '}
diff --git a/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx b/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx
index 70774dc6e..d84372b0e 100644
--- a/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx
+++ b/packages/app/src/features/topbar/components/topbar-airdrop/TopbarAirdropDropdown.tsx
@@ -61,13 +61,13 @@ export function TopbarAirdropDropdown({
{isLoading ? (
+
{formatAirdropAmount({ amount, precision, isGrowing })} {SPK_MOCK_TOKEN.symbol}
)}
-
+
DAI borrowers with volatile assets and ETH depositors will be eligible for a future ⚡ SPK airdrop.
diff --git a/packages/app/src/features/topbar/components/topbar-menu/TopbarMenu.tsx b/packages/app/src/features/topbar/components/topbar-menu/TopbarMenu.tsx
index 57958fe67..c1548fa16 100644
--- a/packages/app/src/features/topbar/components/topbar-menu/TopbarMenu.tsx
+++ b/packages/app/src/features/topbar/components/topbar-menu/TopbarMenu.tsx
@@ -64,7 +64,7 @@ export function TopbarMenu({
Sandbox Mode
-
+
Explore Spark with
@@ -82,7 +82,7 @@ export function TopbarMenu({
to={links.github}
variant="unstyled"
external
- className="typography-label-6 bg-secondary p-6 text-center text-secondary"
+ className="typography-label-4 bg-secondary p-6 text-center text-secondary"
>
Built from {sha} at {buildTime}
@@ -109,7 +109,7 @@ export function TopbarMenu({
Sandbox Mode
-
+
Explore Spark with
@@ -127,7 +127,7 @@ export function TopbarMenu({
to={links.github}
variant="unstyled"
external
- className="typography-label-6 p-5 text-center text-secondary"
+ className="typography-label-4 p-5 text-center text-secondary"
>
Built from {sha} at {buildTime}
diff --git a/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuAirdropItem.tsx b/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuAirdropItem.tsx
index e10cecb1b..8742f8c5a 100644
--- a/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuAirdropItem.tsx
+++ b/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuAirdropItem.tsx
@@ -67,7 +67,7 @@ function TopbarMenuAirdropDialog({
-
Spark Airdrop Tokens
+
Spark Airdrop Tokens
{SPK_MOCK_TOKEN.format(amount ?? NormalizedUnitNumber(0), { style: 'compact' })}
@@ -82,13 +82,13 @@ function TopbarMenuAirdropDialog({
Spark Airdrop Tokens
- Amount
+ Amount
{isLoading ? (
) : (
-
+
{formatAirdropAmount({ amount, precision, isGrowing })} {SPK_MOCK_TOKEN.symbol}
)}
@@ -96,7 +96,7 @@ function TopbarMenuAirdropDialog({
-
+
DAI borrowers with volatile assets and ETH depositors will be eligible for a future ⚡ SPK airdrop.
diff --git a/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuRewardsItem.tsx b/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuRewardsItem.tsx
index 7bc315cf5..e28e0f95c 100644
--- a/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuRewardsItem.tsx
+++ b/packages/app/src/features/topbar/components/topbar-menu/components/TopbarMenuRewardsItem.tsx
@@ -17,7 +17,7 @@ export function TopbarMenuRewardsItem({ onClaim, totalClaimableReward, rewards }
-
Rewards
+
Rewards
{USD_MOCK_TOKEN.formatUSD(totalClaimableReward, { compact: true })}
@@ -36,12 +36,12 @@ export function TopbarMenuRewardsItem({ onClaim, totalClaimableReward, rewards }
-
+
{token.format(amount, { style: 'auto' })} {token.symbol}
-
{token.formatUSD(amount)}
+
{token.formatUSD(amount)}
))}
diff --git a/packages/app/src/features/topbar/components/topbar-navigation/TopbarButton.tsx b/packages/app/src/features/topbar/components/topbar-navigation/TopbarButton.tsx
index 890b1a5f8..5173c4b82 100644
--- a/packages/app/src/features/topbar/components/topbar-navigation/TopbarButton.tsx
+++ b/packages/app/src/features/topbar/components/topbar-navigation/TopbarButton.tsx
@@ -5,7 +5,7 @@ import { NavLink, To, useMatch } from 'react-router-dom'
const buttonVariants = cva(
cn(
- 'typography-label-4 inline-flex h-20 flex-nowrap items-center sm:h-10',
+ 'typography-label-2 inline-flex h-20 flex-nowrap items-center sm:h-10',
'group gap-2 border-base-white border-l-4 bg-primary px-4 py-2 sm:rounded-sm sm:border sm:border-primary',
'border-solid border-opacity-40 transition-colors sm:shadow-xs',
'focus-visible:outline-none focus-visible:ring-1 ',
diff --git a/packages/app/src/features/topbar/components/topbar-rewards/TopbarRewards.tsx b/packages/app/src/features/topbar/components/topbar-rewards/TopbarRewards.tsx
index c5bf82183..36076c175 100644
--- a/packages/app/src/features/topbar/components/topbar-rewards/TopbarRewards.tsx
+++ b/packages/app/src/features/topbar/components/topbar-rewards/TopbarRewards.tsx
@@ -61,7 +61,7 @@ export function TopbarRewards({ rewards, onClaim, totalClaimableReward }: Topbar
-
+
{token.format(amount, { style: 'auto' })}
{' '}
@@ -69,7 +69,7 @@ export function TopbarRewards({ rewards, onClaim, totalClaimableReward }: Topbar
-
+
{token.formatUSD(amount)}
diff --git a/packages/app/src/features/topbar/components/topbar-wallet/components/TopbarWalletAddressDisplay.tsx b/packages/app/src/features/topbar/components/topbar-wallet/components/TopbarWalletAddressDisplay.tsx
index 68e6b9333..e004bcc55 100644
--- a/packages/app/src/features/topbar/components/topbar-wallet/components/TopbarWalletAddressDisplay.tsx
+++ b/packages/app/src/features/topbar/components/topbar-wallet/components/TopbarWalletAddressDisplay.tsx
@@ -14,7 +14,7 @@ export function TopbarWalletAddressDisplay({ walletIcon, address }: TopbarWallet
-
+
diff --git a/packages/app/src/ui/atoms/accordion/Accordion.tsx b/packages/app/src/ui/atoms/accordion/Accordion.tsx
index 9151fc88d..2b6cd63ca 100644
--- a/packages/app/src/ui/atoms/accordion/Accordion.tsx
+++ b/packages/app/src/ui/atoms/accordion/Accordion.tsx
@@ -21,7 +21,7 @@ const AccordionTrigger = React.forwardRef<
svg]:rotate-180',
+ 'typography-label-2 flex flex-1 items-center justify-between py-4 text-primary transition-all [&[data-state=open]>svg]:rotate-180',
className,
)}
{...props}
@@ -39,7 +39,7 @@ const AccordionContent = React.forwardRef<
>(({ className, children, ...props }, ref) => (
{children}
diff --git a/packages/app/src/ui/atoms/badge/Badge.tsx b/packages/app/src/ui/atoms/badge/Badge.tsx
index 47a4546f5..bbaaee08b 100644
--- a/packages/app/src/ui/atoms/badge/Badge.tsx
+++ b/packages/app/src/ui/atoms/badge/Badge.tsx
@@ -32,7 +32,7 @@ export const Badge = forwardRef(
)
Badge.displayName = 'Badge'
-const badgeVariants = cva('typography-label-5 inline-flex w-fit items-center gap-1 rounded-full', {
+const badgeVariants = cva('typography-label-3 inline-flex w-fit items-center gap-1 rounded-full', {
variants: {
appearance: {
soft: '',
diff --git a/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx b/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx
index 819ae670a..04bdf1b09 100644
--- a/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx
+++ b/packages/app/src/ui/atoms/dropdown/DropdownMenu.tsx
@@ -110,7 +110,7 @@ const DropdownMenuLabel = React.forwardRef<
>(({ className, ...props }, ref) => (
+
1
1.5
@@ -126,7 +126,7 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
fill="#908E9E"
textAnchor="middle"
dominantBaseline="middle"
- className="typography-label-6"
+ className="typography-label-4"
>
2
@@ -136,7 +136,7 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
fill="#908E9E"
textAnchor="middle"
dominantBaseline="middle"
- className="typography-label-6"
+ className="typography-label-4"
>
2.5
@@ -146,7 +146,7 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
fill="#908E9E"
textAnchor="middle"
dominantBaseline="middle"
- className="typography-label-6"
+ className="typography-label-4"
>
3
@@ -156,11 +156,11 @@ export function HealthFactorGauge({ value, className }: HealthFactorGaugeProps)
fill="#908E9E"
textAnchor="middle"
dominantBaseline="middle"
- className="typography-label-6"
+ className="typography-label-4"
>
3.5
-
+
4
diff --git a/packages/app/src/ui/atoms/key-points/KeyPoints.tsx b/packages/app/src/ui/atoms/key-points/KeyPoints.tsx
index 5be59bb7a..98e31f4f6 100644
--- a/packages/app/src/ui/atoms/key-points/KeyPoints.tsx
+++ b/packages/app/src/ui/atoms/key-points/KeyPoints.tsx
@@ -12,7 +12,7 @@ export function KeyPoints({ children, className }: KeyPointsProps) {
function KeyPointsItem({ children, variant }: { children: ReactNode; variant: 'positive' | 'negative' }) {
return (
-
+
{variant === 'positive' && ,
diff --git a/packages/app/src/ui/atoms/link/Link.stories.tsx b/packages/app/src/ui/atoms/link/Link.stories.tsx
index 563130e6d..7f0354f2a 100644
--- a/packages/app/src/ui/atoms/link/Link.stories.tsx
+++ b/packages/app/src/ui/atoms/link/Link.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj
export const Primary: Story = {
render: () => (
-
+
Lorem ipsum dolor sit amend{' '}
consectetur
@@ -26,7 +26,7 @@ export const Primary: Story = {
export const Secondary: Story = {
render: () => (
-
+
Lorem ipsum dolor sit amend{' '}
consectetur
@@ -38,7 +38,7 @@ export const Secondary: Story = {
export const Underline: Story = {
render: () => (
-
+
Lorem ipsum dolor sit amend{' '}
consectetur
@@ -50,7 +50,7 @@ export const Underline: Story = {
export const External: Story = {
render: () => (
-
+
Lorem ipsum dolor sit amend{' '}
consectetur
diff --git a/packages/app/src/ui/atoms/network-badge/NetworkBadge.tsx b/packages/app/src/ui/atoms/network-badge/NetworkBadge.tsx
index 70b178a6d..dc2d81531 100644
--- a/packages/app/src/ui/atoms/network-badge/NetworkBadge.tsx
+++ b/packages/app/src/ui/atoms/network-badge/NetworkBadge.tsx
@@ -10,7 +10,7 @@ export function NetworkBadge({ chainId }: NetworkBadgeProps) {
return (
-
{meta.name}
+
{meta.name}
)
}
diff --git a/packages/app/src/ui/atoms/redesign-top-banner/RedesignTopBanner.tsx b/packages/app/src/ui/atoms/redesign-top-banner/RedesignTopBanner.tsx
index 96fdbebec..d44fd9a21 100644
--- a/packages/app/src/ui/atoms/redesign-top-banner/RedesignTopBanner.tsx
+++ b/packages/app/src/ui/atoms/redesign-top-banner/RedesignTopBanner.tsx
@@ -18,7 +18,7 @@ export function RedesignTopBanner({ onClose, className }: RedesignTopBannerProps
className,
)}
>
-
+
Welcome to the{' '}
New Spark!
diff --git a/packages/app/src/ui/atoms/table/Table.tsx b/packages/app/src/ui/atoms/table/Table.tsx
index 02595df43..ff3f262b7 100644
--- a/packages/app/src/ui/atoms/table/Table.tsx
+++ b/packages/app/src/ui/atoms/table/Table.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/ui/utils/style'
const Table = React.forwardRef>(
({ className, ...props }, ref) => (
-
+
),
)
Table.displayName = 'Table'
@@ -59,7 +59,7 @@ TableCell.displayName = 'TableCell'
const TableCaption = React.forwardRef>(
({ className, ...props }, ref) => (
- {children}
+ return {children}
}
function TooltipContentLayoutBody({ children }: ChildrenProps) {
@@ -43,7 +43,7 @@ const TooltipTrigger = RadixPrimitive.Trigger
const tooltipContentVariants = cva(
cn(
- 'typography-label-6 z-50 overflow-hidden rounded-sm bg-primary-inverse',
+ 'typography-label-4 z-50 overflow-hidden rounded-sm bg-primary-inverse',
'border-primary/25 border-t px-3 py-2 text-fg-primary-inverse shadow-glow-lg',
),
{
diff --git a/packages/app/src/ui/charts/ChartTooltipContent.tsx b/packages/app/src/ui/charts/ChartTooltipContent.tsx
index d3ed88772..85e440bc2 100644
--- a/packages/app/src/ui/charts/ChartTooltipContent.tsx
+++ b/packages/app/src/ui/charts/ChartTooltipContent.tsx
@@ -11,12 +11,12 @@ export function ChartTooltipContent({ children: [date, value] }: { children: Rea
}
function TooltipDate({ children }: { children: ReactNode }) {
- return {children}
+ return {children}
}
function TooltipValue({ children, dotColor }: { children: ReactNode; dotColor: string }) {
return (
-
+
diff --git a/packages/app/src/ui/charts/components/ChartTabsPanel.tsx b/packages/app/src/ui/charts/components/ChartTabsPanel.tsx
index cab8de35f..d5315683a 100644
--- a/packages/app/src/ui/charts/components/ChartTabsPanel.tsx
+++ b/packages/app/src/ui/charts/components/ChartTabsPanel.tsx
@@ -78,7 +78,7 @@ export function ChartTabsPanel({ tabs, onTimeframeChange, selectedTimeframe, hei
{tabs.map((tab) => (
-
+
{tab.label}
))}
@@ -124,7 +124,7 @@ function ChartPanel({ height, component: Chart, isError, isPending, props }: Cha
if (isError) {
return (
-
+
Failed to load chart data
diff --git a/packages/app/src/ui/charts/components/TimeframeButtons.tsx b/packages/app/src/ui/charts/components/TimeframeButtons.tsx
index 990d11b65..d76d5cc82 100644
--- a/packages/app/src/ui/charts/components/TimeframeButtons.tsx
+++ b/packages/app/src/ui/charts/components/TimeframeButtons.tsx
@@ -34,7 +34,7 @@ function TimeframeButton({ selected, ...props }: TimeframeButtonProps) {
return (
-
+
{pageName} {pageName.endsWith('s') ? 'are' : 'is'} not supported on the network you are connected to.
-
+
Switch to other supported networks to unlock this page.
diff --git a/packages/app/src/ui/molecules/alert/Alert.tsx b/packages/app/src/ui/molecules/alert/Alert.tsx
index fdeaa5902..840eb988f 100644
--- a/packages/app/src/ui/molecules/alert/Alert.tsx
+++ b/packages/app/src/ui/molecules/alert/Alert.tsx
@@ -32,7 +32,7 @@ export const Alert = forwardRef
(
)
Alert.displayName = 'Alert'
-const alertVariants = cva('typography-label-6 grid grid-cols-[auto_1fr] items-center gap-3 rounded-sm p-4', {
+const alertVariants = cva('typography-label-4 grid grid-cols-[auto_1fr] items-center gap-3 rounded-sm p-4', {
variants: {
variant: {
info: 'bg-brand-secondary text-brand-primary',
diff --git a/packages/app/src/ui/molecules/asset-selector/AssetSelector.tsx b/packages/app/src/ui/molecules/asset-selector/AssetSelector.tsx
index 997ff4964..7e072818a 100644
--- a/packages/app/src/ui/molecules/asset-selector/AssetSelector.tsx
+++ b/packages/app/src/ui/molecules/asset-selector/AssetSelector.tsx
@@ -33,7 +33,7 @@ export function AssetSelector({
>
-
{selectedAsset.symbol}
+
{selectedAsset.symbol}
)
@@ -44,7 +44,7 @@ export function AssetSelector({
-
{selectedAsset.symbol}
+
{selectedAsset.symbol}
@@ -56,12 +56,12 @@ export function AssetSelector({
>
-
{token.symbol}
+
{token.symbol}
{showBalance && (
-
Balance
-
+
Balance
+
{token.format(balance, { style: 'compact' })}
diff --git a/packages/app/src/ui/molecules/cooldown-timer/CooldownTimer.tsx b/packages/app/src/ui/molecules/cooldown-timer/CooldownTimer.tsx
index 55efc9013..9ee261c28 100644
--- a/packages/app/src/ui/molecules/cooldown-timer/CooldownTimer.tsx
+++ b/packages/app/src/ui/molecules/cooldown-timer/CooldownTimer.tsx
@@ -25,9 +25,9 @@ export function CooldownTimer({ renewalPeriod, latestUpdateTimestamp, forceOpen
-
+
Cooldown period:
-
{secondsToTime(timeLeft)}
+
{secondsToTime(timeLeft)}
{timeLeft === 0 ? (
<>
The cap renewal cooldown is over.
It might be changed at any time.
diff --git a/packages/app/src/ui/molecules/data-table/components/ColumnHeader.tsx b/packages/app/src/ui/molecules/data-table/components/ColumnHeader.tsx
index b6587d629..cf1206aeb 100644
--- a/packages/app/src/ui/molecules/data-table/components/ColumnHeader.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/ColumnHeader.tsx
@@ -22,7 +22,7 @@ export function ColumnHeader
({ column, columnDefinition }: ColumnHeaderProps<
{sortable ? (
sortable && column.toggleSorting(column.getIsSorted() === 'asc')}
>
{column.getIsSorted() !== false ? (
@@ -39,7 +39,7 @@ export function ColumnHeader({ column, columnDefinition }: ColumnHeaderProps<
{header}
) : (
- {header}
+ {header}
)}
)
diff --git a/packages/app/src/ui/molecules/data-table/components/CompactValueCell.tsx b/packages/app/src/ui/molecules/data-table/components/CompactValueCell.tsx
index d0ddd891f..05d0550fd 100644
--- a/packages/app/src/ui/molecules/data-table/components/CompactValueCell.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/CompactValueCell.tsx
@@ -26,7 +26,7 @@ export function CompactValueCell({
if (mobileViewOptions?.isMobileView) {
return (
-
{mobileViewOptions.rowTitle}
+
{mobileViewOptions.rowTitle}
{token.format(value, { style: compactValue ? 'compact' : 'auto' })}
-
+
{token.formatUSD(value, { compact: compactValue })}
diff --git a/packages/app/src/ui/molecules/data-table/components/PercentageCell.tsx b/packages/app/src/ui/molecules/data-table/components/PercentageCell.tsx
index 67b9ce79e..244a38ebe 100644
--- a/packages/app/src/ui/molecules/data-table/components/PercentageCell.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/PercentageCell.tsx
@@ -12,7 +12,7 @@ export function PercentageCell({ value, mobileViewOptions }: PercentageCellProps
if (mobileViewOptions?.isMobileView) {
return (
-
{mobileViewOptions.rowTitle}
+
{mobileViewOptions.rowTitle}
{formatPercentage(value)}
)
diff --git a/packages/app/src/ui/molecules/data-table/components/SwitchCell.tsx b/packages/app/src/ui/molecules/data-table/components/SwitchCell.tsx
index f302dbd6f..84eb65679 100644
--- a/packages/app/src/ui/molecules/data-table/components/SwitchCell.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/SwitchCell.tsx
@@ -12,7 +12,7 @@ export function SwitchCell({ checked, onSwitchClick, mobileViewOptions }: Switch
if (mobileViewOptions?.isMobileView) {
return (
-
{mobileViewOptions.rowTitle}
+
{mobileViewOptions.rowTitle}
)
diff --git a/packages/app/src/ui/molecules/data-table/components/TokenWithLogo.tsx b/packages/app/src/ui/molecules/data-table/components/TokenWithLogo.tsx
index 137c0b7f7..7fd025ae0 100644
--- a/packages/app/src/ui/molecules/data-table/components/TokenWithLogo.tsx
+++ b/packages/app/src/ui/molecules/data-table/components/TokenWithLogo.tsx
@@ -23,7 +23,7 @@ export function TokenWithLogo({ token, reserveStatus }: TokenWithLogoProps) {
+
{token.symbol}
{isFrozen &&
}
diff --git a/packages/app/src/ui/molecules/health-factor-panel-content/HealthFactorPanelContent.tsx b/packages/app/src/ui/molecules/health-factor-panel-content/HealthFactorPanelContent.tsx
index 790925603..6b1bb0adf 100644
--- a/packages/app/src/ui/molecules/health-factor-panel-content/HealthFactorPanelContent.tsx
+++ b/packages/app/src/ui/molecules/health-factor-panel-content/HealthFactorPanelContent.tsx
@@ -19,7 +19,7 @@ export const HealthFactorPanelContent = forwardRef
-
Health factor
+
Health factor
The health factor is a number that shows how safe your assets are in the protocol. It's calculated by
@@ -45,7 +45,7 @@ export const HealthFactorPanelContent = forwardRef
-
Liquidation Price
+
Liquidation Price
Estimated price of {liquidationDetails.tokenWithPrice.symbol} at which the position may be
liquidated.
@@ -55,7 +55,7 @@ export const HealthFactorPanelContent = forwardRef
-
Current {liquidationDetails.tokenWithPrice.symbol} Price
+
Current {liquidationDetails.tokenWithPrice.symbol} Price
Current price of {liquidationDetails.tokenWithPrice.symbol}.
{USD_MOCK_TOKEN.formatUSD(liquidationDetails.tokenWithPrice.priceInUSD)}
diff --git a/packages/app/src/ui/molecules/icon-stack/IconStack.tsx b/packages/app/src/ui/molecules/icon-stack/IconStack.tsx
index 29495400a..09dbd7c46 100644
--- a/packages/app/src/ui/molecules/icon-stack/IconStack.tsx
+++ b/packages/app/src/ui/molecules/icon-stack/IconStack.tsx
@@ -40,7 +40,7 @@ export function IconStack({
diff --git a/packages/app/src/ui/molecules/labeled-switch/LabeledSwitch.tsx b/packages/app/src/ui/molecules/labeled-switch/LabeledSwitch.tsx
index effb14ddc..75b8241ca 100644
--- a/packages/app/src/ui/molecules/labeled-switch/LabeledSwitch.tsx
+++ b/packages/app/src/ui/molecules/labeled-switch/LabeledSwitch.tsx
@@ -13,7 +13,7 @@ export function LabeledSwitch({ children, 'data-testid': dataTestId, ...props }:
return (
+
{children}
diff --git a/packages/app/src/ui/molecules/token-amount/TokenAmount.tsx b/packages/app/src/ui/molecules/token-amount/TokenAmount.tsx
index 71ddffa5b..4098b7aad 100644
--- a/packages/app/src/ui/molecules/token-amount/TokenAmount.tsx
+++ b/packages/app/src/ui/molecules/token-amount/TokenAmount.tsx
@@ -27,12 +27,12 @@ export function TokenAmount({
-
+
{formattedAmount}
{/* @note: next line is need to maintain backward compatibility with e2e test - amount should include token symbol */}
{token.symbol}
-
@@ -43,12 +43,12 @@ export function TokenAmount({
return (
-
+
{formattedAmount}
{token.symbol}
-
diff --git a/packages/app/src/ui/organisms/asset-input/AssetInput.tsx b/packages/app/src/ui/organisms/asset-input/AssetInput.tsx
index 854ed53f1..406fab7a4 100644
--- a/packages/app/src/ui/organisms/asset-input/AssetInput.tsx
+++ b/packages/app/src/ui/organisms/asset-input/AssetInput.tsx
@@ -84,7 +84,7 @@ export function AssetInput
({
return (
- {label &&
{label}
}
+ {label &&
{label}
}
({
type="text"
inputMode="decimal"
className={cn(
- 'typography-label-4 text-primary focus:outline-none',
+ 'typography-label-2 text-primary focus:outline-none',
disabled && 'cursor-not-allowed opacity-50',
)}
placeholder="0"
@@ -136,7 +136,7 @@ export function AssetInput
({
}
}}
/>
-
+
{token.formatUSD(NormalizedUnitNumber(parseBigNumber(value, 0)))}
({
({
>
MAX
-
+
{token.format(maxValue, { style: 'compact' })} {token.symbol}
({
{onRemove &&
{showError && error && (
-
+
{error.message}
)}
diff --git a/packages/app/src/ui/organisms/responsive-data-table/ResponsiveDataTable.tsx b/packages/app/src/ui/organisms/responsive-data-table/ResponsiveDataTable.tsx
index c22399d94..01d5cdbd5 100644
--- a/packages/app/src/ui/organisms/responsive-data-table/ResponsiveDataTable.tsx
+++ b/packages/app/src/ui/organisms/responsive-data-table/ResponsiveDataTable.tsx
@@ -47,7 +47,7 @@ export function ResponsiveDataTable
({
{[rowHeaderDefinition?.header, 'More info'].map((header, index) => (
-
+
{header}
))}
diff --git a/packages/app/src/ui/organisms/risk-acknowledgement/RiskAcknowledgement.tsx b/packages/app/src/ui/organisms/risk-acknowledgement/RiskAcknowledgement.tsx
index c2b6404c6..8f7196622 100644
--- a/packages/app/src/ui/organisms/risk-acknowledgement/RiskAcknowledgement.tsx
+++ b/packages/app/src/ui/organisms/risk-acknowledgement/RiskAcknowledgement.tsx
@@ -24,7 +24,7 @@ export function RiskAcknowledgement({ warning, onStatusChange }: RiskAcknowledge
- I acknowledge risks involved
+ I acknowledge risks involved
-
Transaction overview
+
Transaction overview
{showSkyBadge && (
-
Powered by Sky
+
Powered by Sky
{children}:
+ return {children}:
}
function TransactionOverviewRow({ children }: { children: React.ReactNode }) {
@@ -66,7 +66,7 @@ function TransactionOverviewRow({ children }: { children: React.ReactNode }) {
}
function TransactionOverviewGenericRow({ className, ...rest }: HTMLAttributes) {
- return
+ return
}
TransactionOverview.Label = TransactionOverviewLabel
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx
index 19b79feab..fa983e80b 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewApyChange.tsx
@@ -14,7 +14,7 @@ export function TransactionOverviewApyChange({ currentApy, updatedApy }: Transac
{formatPercentage(currentApy)}
@@ -22,7 +22,7 @@ export function TransactionOverviewApyChange({ currentApy, updatedApy }: Transac
All assets
@@ -20,7 +20,7 @@ export function TransactionOverviewAvailableAssets({ categoryName, tokens }: Tra
}
return (
-
+
{categoryName}
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewFarmApy.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewFarmApy.tsx
index 6ebfae312..5d773ce48 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewFarmApy.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewFarmApy.tsx
@@ -17,13 +17,13 @@ export function TransactionOverviewFarmApy({ apy, rewardsPerYear, rewardToken }:
{apy.gt(0) && (
{formatPercentage(apy)}
)}
Earn ~{rewardToken.format(rewardsPerYear, { style: 'auto' })} {rewardToken.symbol}/year
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx
index f748c2c48..2557a308d 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewHealthFactorChange.tsx
@@ -53,7 +53,7 @@ function HealthFactorBadge({ healthFactor, 'data-testid': dataTestId }: HealthFa
{title}
-
{formatHealthFactor(healthFactor)}
+
{formatHealthFactor(healthFactor)}
)
}
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx
index d73f4d6d1..ac8499417 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewMaxLtvChange.tsx
@@ -15,7 +15,7 @@ export function TransactionOverviewMaxLtvChange({
if (!updatedMaxLTV) {
return (
{formatPercentage(currentMaxLTV)}
@@ -24,7 +24,7 @@ export function TransactionOverviewMaxLtvChange({
}
return (
-
+
{formatPercentage(currentMaxLTV)}
{formatPercentage(updatedMaxLTV)}
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx
index 63eb1fc69..2ac02419e 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewRoute.tsx
@@ -42,10 +42,10 @@ export function TransactionOverviewRoute({ route }: TransactionOverviewRouteProp
/>
) : (
-
+
{item.upperText}
-
@@ -62,7 +62,7 @@ export function TransactionOverviewRoutePlaceholder({ className, ...rest }: HTML
return (
)
}
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewSavingsApy.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewSavingsApy.tsx
index f997c1191..d4f0ba497 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewSavingsApy.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewSavingsApy.tsx
@@ -17,13 +17,13 @@ export function TransactionOverviewSavingsApy({ apy, stableEarnRate, baseStable
{apy.gt(0) && (
{formatPercentage(apy)}
)}
Earn ~{baseStable.format(stableEarnRate, { style: 'auto' })} {baseStable.symbol}/year
diff --git a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx
index 95f7c4547..c1b91f4d1 100644
--- a/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx
+++ b/packages/app/src/ui/organisms/transaction-overview/rows/TransactionOverviewStakedInFarm.tsx
@@ -17,7 +17,7 @@ export function TransactionOverviewStakedInFarm({ token, amount, farmName }: Tra
{formattedAmount}
diff --git a/packages/app/tailwind.config.ts b/packages/app/tailwind.config.ts
index d17f2b2bf..64f21e8b8 100644
--- a/packages/app/tailwind.config.ts
+++ b/packages/app/tailwind.config.ts
@@ -413,32 +413,32 @@ export default {
plugin(({ addUtilities, theme }) => {
addUtilities({
'.typography-display-1': {
- fontSize: '2.375rem', // 38px
- lineHeight: '2.375rem', // 38px
+ fontSize: '4.5rem', // 72px
+ lineHeight: '4.5rem', // 72px
letterSpacing: 'calc(-2 * 0.01em)',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
},
'.typography-display-2': {
- fontSize: '1.875rem', // 30px
- lineHeight: '1.875rem', // 30px
+ fontSize: '3.5rem', // 56px
+ lineHeight: '3.5rem', // 56px
letterSpacing: 'calc(-2 * 0.01em)',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
},
'.typography-display-3': {
- fontSize: '1.5rem', // 24px
- lineHeight: '1.5rem', // 24px
+ fontSize: '3rem', // 48px
+ lineHeight: '3.75rem', // 60px
letterSpacing: 'calc(-1 * 0.01em)',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
},
'.typography-heading-1': {
- fontSize: '2.625rem', // 42px
- lineHeight: '3rem', // 48px
+ fontSize: '2.25rem', // 36px
+ lineHeight: '2.625rem', // 42px
letterSpacing: 'calc(-1 * 0.01em)',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
@@ -476,130 +476,82 @@ export default {
fontFamily: theme('fontFamily.roobert'),
},
- '.typography-heading-6': {
- fontSize: '0.875rem', // 14px
- lineHeight: '1rem', // 20px
- letterSpacing: 'calc(-1 * 0.01em)',
- fontWeight: '500',
- fontFamily: theme('fontFamily.roobert'),
- },
-
- '.typography-heading-7': {
- fontSize: '0.75rem', // 12px
- lineHeight: '0.875rem', // 14px
- letterSpacing: 'calc(-1 * 0.01em)',
- fontWeight: '500',
- fontFamily: theme('fontFamily.roobert'),
- },
-
'.typography-body-1': {
- fontSize: '1.25rem', // 20px
- lineHeight: '1.875rem', // 30px
- letterSpacing: 'calc(-1 * 0.01em)',
- fontWeight: '400',
- fontFamily: theme('fontFamily.sans'),
- },
-
- '.typography-body-2': {
- fontSize: '1.125rem', // 18px
- lineHeight: '1.75rem', // 28px
- letterSpacing: 'calc(-1 * 0.01em)',
- fontWeight: '400',
- fontFamily: theme('fontFamily.sans'),
- },
-
- '.typography-body-3': {
fontSize: '1rem', // 16px
lineHeight: '1.5rem', // 24px
- letterSpacing: 'calc(-1 * 0.01em)',
+ letterSpacing: '0px',
fontWeight: '400',
fontFamily: theme('fontFamily.sans'),
},
- '.typography-body-4': {
+ '.typography-body-2': {
fontSize: '0.875rem', // 14px
lineHeight: '1.25rem', // 20px
- letterSpacing: 'calc(-1 * 0.01em)',
+ letterSpacing: '0px',
fontWeight: '400',
fontFamily: theme('fontFamily.sans'),
},
- '.typography-body-5': {
+ '.typography-body-3': {
fontSize: '0.75rem', // 12px
lineHeight: '1.125rem', // 18px
- letterSpacing: 'calc(-1 * 0.01em)',
+ letterSpacing: '0px',
fontWeight: '400',
fontFamily: theme('fontFamily.sans'),
},
- '.typography-body-6': {
- fontSize: '0.625rem', // 10px
- lineHeight: '0.875rem', // 14px
- letterSpacing: 'calc(-1 * 0.01em)',
+ '.typography-body-4': {
+ fontSize: '0.75rem', // 12px
+ lineHeight: '1.125rem', // 18px
+ letterSpacing: '0px',
fontWeight: '400',
fontFamily: theme('fontFamily.sans'),
},
// @todo update typography below when added
'.typography-label-1': {
- fontSize: '1.5rem',
- lineHeight: '1.75rem',
- letterSpacing: 'calc(-1 * 0.01em)',
- fontWeight: '500',
- fontFamily: theme('fontFamily.roobert'),
- },
-
- '.typography-label-2': {
- fontSize: '1.25rem',
- lineHeight: '1.5rem',
- letterSpacing: 'calc(-1 * 0.01em)',
- fontWeight: '500',
- fontFamily: theme('fontFamily.roobert'),
- },
-
- '.typography-label-3': {
- fontSize: '1.125rem',
- lineHeight: '1.375rem',
+ fontSize: '1rem', // 16px
+ lineHeight: '1.125rem', // 18px
letterSpacing: 'calc(-0.5 * 0.01em)',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
},
- '.typography-label-4': {
- fontSize: '1rem',
- lineHeight: '1.125rem',
+ '.typography-label-2': {
+ fontSize: '0.875rem', // 14px
+ lineHeight: '1rem', // 16px
letterSpacing: 'calc(-0.5 * 0.01em)',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
},
- '.typography-label-5': {
- fontSize: '0.875rem',
- lineHeight: '1rem',
+ '.typography-label-3': {
+ fontSize: '0.75rem', // 12px
+ lineHeight: '1rem', // 16px
letterSpacing: '0px',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
},
- '.typography-label-6': {
- fontSize: '0.75rem',
- lineHeight: '1rem',
+ '.typography-label-4': {
+ fontSize: '0.75rem', // 12px
+ lineHeight: '1rem', // 16px
letterSpacing: '0px',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
},
'.typography-button-1': {
- fontSize: '1rem',
- lineHeight: '1.25rem',
+ fontSize: '1rem', // 16px
+ lineHeight: '1.25rem', // 20px
letterSpacing: '0px',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
},
'.typography-button-2': {
- fontSize: '0.875rem',
- lineHeight: '1rem',
+ fontSize: '0.875rem', // 14px
+ lineHeight: '1rem', // 16px
letterSpacing: '0px',
fontWeight: '500',
fontFamily: theme('fontFamily.roobert'),
@@ -647,61 +599,41 @@ export default {
},
'.typography-body-1': {
- fontSize: '1.5rem', // 24px
- lineHeight: '2.25rem', // 36px
- },
-
- '.typography-body-2': {
- fontSize: '1.25rem', // 20px
- lineHeight: '1.875rem', // 30px
- },
-
- '.typography-body-3': {
fontSize: '1.125rem', // 18px
lineHeight: '1.75rem', // 28px
},
- '.typography-body-4': {
+ '.typography-body-2': {
fontSize: '1rem', // 16px
lineHeight: '1.5rem', // 24px
},
- '.typography-body-5': {
+ '.typography-body-3': {
fontSize: '0.875rem', // 14px
lineHeight: '1.25rem', // 20px
},
- '.typography-body-6': {
+ '.typography-body-4': {
fontSize: '0.75rem', // 12px
lineHeight: '1.125rem', // 18px
},
'.typography-label-1': {
- fontSize: '1.5rem', // 24px
- lineHeight: '1.75rem', // 28px
- },
-
- '.typography-label-2': {
- fontSize: '1.25rem', // 20px
- lineHeight: '1.5rem', // 24px
- },
-
- '.typography-label-3': {
fontSize: '1.125rem', // 18px
lineHeight: '1.375rem', // 22px
},
- '.typography-label-4': {
+ '.typography-label-2': {
fontSize: '1rem', // 16px
lineHeight: '1.125rem', // 18px
},
- '.typography-label-5': {
+ '.typography-label-3': {
fontSize: '0.875rem', // 14px
lineHeight: '1rem', // 16px
},
- '.typography-label-6': {
+ '.typography-label-4': {
fontSize: '0.75rem', // 12px
lineHeight: '1rem', // 16px
},
@@ -729,7 +661,6 @@ export default {
lineHeight: '100%',
},
- // needed to override the default line heights
'@screen sm': {
'.leading-spacious': {
lineHeight: '150%',