+ {chainIcon && 
}
+ {chainName} Data
+
+ );
+}
diff --git a/src/components/Checkbox/Checkbox.css b/src/components/Checkbox/Checkbox.css
deleted file mode 100644
index bd638153b0..0000000000
--- a/src/components/Checkbox/Checkbox.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.Checkbox {
- cursor: pointer;
- display: flex;
- align-items: center;
-}
-
-@media (pointer: coarse) {
- .Checkbox {
- user-select: none;
- }
-}
-
-.Checkbox.disabled {
- cursor: default;
- pointer-events: none;
-}
-
-.Checkbox-icon-wrapper {
- display: inline-flex;
- align-items: center;
-}
-
-.Checkbox .Checkbox-icon {
- font-size: 1.25rem;
- color: var(--color-blue-500);
- margin-right: 0.62rem;
- margin-bottom: 0;
-}
-
-.Checkbox.noLabel .Checkbox-icon,
-.Checkbox.fullRow .Checkbox-icon {
- margin-right: 0;
-}
-
-.Checkbox.disabled .Checkbox-icon {
- color: #47509e;
-}
-
-.Checkbox-icon.inactive {
- color: var(--color-gray-300);
-}
-
-.Checkbox-label {
- display: inline-block;
- vertical-align: middle;
- font-size: var(--font-size-body-medium);
- line-height: var(--line-height-body-medium);
- text-align: left;
- flex: 1;
-}
-
-.Checkbox.fullRow {
- width: 100%;
- display: flex;
- grid-template-columns: 1fr auto;
- flex-direction: row-reverse;
- font-size: var(--font-size-body-small);
- margin-bottom: 0.465rem;
-}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index a4fcf19184..85054842c6 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,10 +1,7 @@
import cx from "classnames";
-import React, { ReactNode } from "react";
-import { ImCheckboxUnchecked, ImCheckboxChecked } from "react-icons/im";
-
-import PartialCheckedIcon from "img/ic_partial_checked.svg?react";
-
-import "./Checkbox.css";
+import { ReactNode } from "react";
+import { BsCheck } from "react-icons/bs";
+import { TiMinus } from "react-icons/ti";
type Props = {
isChecked?: boolean;
@@ -21,20 +18,32 @@ export default function Checkbox(props: Props) {
const { isChecked, setIsChecked, disabled, className, asRow, isPartialChecked } = props;
return (
- {
setIsChecked?.(!isChecked);
event.stopPropagation();
}}
data-qa={props.qa}
>
-
- {isPartialChecked &&
+ {props.children && props.children}
+
);
}
diff --git a/src/components/ColorfulBanner/ColorfulBanner.tsx b/src/components/ColorfulBanner/ColorfulBanner.tsx
index 57f55b4fd4..75ccff6804 100644
--- a/src/components/ColorfulBanner/ColorfulBanner.tsx
+++ b/src/components/ColorfulBanner/ColorfulBanner.tsx
@@ -2,36 +2,42 @@ import cx from "classnames";
import { useCallback } from "react";
import { IoMdClose } from "react-icons/io";
+import ButtonLink from "components/Button/ButtonLink";
+
const colorSchemas = {
green: {
border: "border-l-green-700",
bg: "bg-green-600",
+ icon: "text-green-600",
},
red: {
border: "border-l-red-700",
bg: "bg-red-600",
+ icon: "text-red-600",
},
blue: {
- border: "border-l-blue-600",
- bg: "bg-cold-blue-700",
+ border: "border-l-blue-300",
+ icon: "text-blue-300",
+ bg: "bg-blue-300 bg-opacity-20",
},
- slate: {
- border: "border-l-slate-100",
- bg: "bg-slate-600",
+ yellow: {
+ border: "border-l-yellow-300",
+ icon: "text-yellow-300",
+ bg: "bg-yellow-300 bg-opacity-20",
},
};
export function ColorfulBanner({
children,
- icon,
+ icon: Icon,
onClose,
onClick,
withBorder = true,
className,
- color = "slate",
+ color = "blue",
}: {
children: React.ReactNode;
- icon?: React.ReactNode;
+ icon?: React.FunctionComponent
- {icon && (
- {children} ;
+ }
+
+ return ;
+};
diff --git a/src/components/Common/Card.css b/src/components/Common/Card.css
index 574b401f69..174ad7d787 100644
--- a/src/components/Common/Card.css
+++ b/src/components/Common/Card.css
@@ -1,6 +1,6 @@
.card {
- border-radius: 0.4rem;
- background: var(--color-slate-800);
+ border-radius: 8px;
+ background: var(--color-slate-900);
}
.card-header {
@@ -16,8 +16,8 @@
.card-divider {
height: 1px;
- background: var(--color-slate-700);
+ background: var(--color-slate-600);
}
.card-body {
- padding: 1.5rem;
+ padding: 16px;
}
diff --git a/src/components/Common/ConnectWalletButton.scss b/src/components/Common/ConnectWalletButton.scss
deleted file mode 100644
index 219c4c15d2..0000000000
--- a/src/components/Common/ConnectWalletButton.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.connect-wallet-btn {
- background: transparent;
- padding: 0.85rem 1.4rem;
- display: inline-flex;
- align-items: center;
- border: none;
- color: var(--color-white);
- font-size: var(--font-size-body-medium);
- white-space: nowrap;
- cursor: pointer;
- border: 1px solid var(--color-stroke-primary);
- border-radius: var(--border-radius-sm);
-
- .btn-icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- }
- .btn-label {
- font-weight: 400;
- font-size: var(--font-size-body-medium);
- margin-left: 0.8rem;
- letter-spacing: 0;
- }
- &:hover {
- background: var(--dark-blue-hover);
- }
- &:active {
- background: var(--dark-blue-active);
- }
-}
-
-@media (max-width: 450px) {
- .connect-wallet {
- padding: 0.5rem 0.8rem;
- }
-}
-
-@media (max-width: 350px) {
- .connect-wallet-btn {
- height: 3.6rem;
- .btn-icon {
- display: none;
- }
- .btn-label {
- margin-left: 0px;
- }
- }
-}
diff --git a/src/components/Common/ConnectWalletButton.tsx b/src/components/Common/ConnectWalletButton.tsx
index 6cdc54e130..4897a190eb 100644
--- a/src/components/Common/ConnectWalletButton.tsx
+++ b/src/components/Common/ConnectWalletButton.tsx
@@ -1,18 +1,23 @@
import { ReactNode } from "react";
+import { FaWallet } from "react-icons/fa6";
-import "./ConnectWalletButton.scss";
+import Button from "components/Button/Button";
type Props = {
- imgSrc: string;
children: ReactNode;
onClick: () => void;
};
-export default function ConnectWalletButton({ imgSrc, children, onClick }: Props) {
+export default function ConnectWalletButton({ children, onClick }: Props) {
return (
-
+
);
}
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index 6a7cd22dc3..75aa574bf2 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -30,7 +30,7 @@
overflow-y: auto;
max-height: 30rem;
background: var(--color-slate-800);
- border: 1px solid var(--color-gray-800);
+ border: 0.5px solid var(--color-slate-600);
text-align: left;
list-style: none;
cursor: pointer;
diff --git a/src/components/EmptyTableContent/EmptyTableContent.tsx b/src/components/EmptyTableContent/EmptyTableContent.tsx
new file mode 100644
index 0000000000..d4f48da6ed
--- /dev/null
+++ b/src/components/EmptyTableContent/EmptyTableContent.tsx
@@ -0,0 +1,20 @@
+import { Trans } from "@lingui/macro";
+import { ReactNode } from "react";
+
+export function EmptyTableContent({
+ isLoading,
+ isEmpty,
+ emptyText = No items yet ,
+}: {
+ isLoading: boolean;
+ isEmpty: boolean;
+ emptyText?: ReactNode;
+}) {
+ if (!isLoading && !isEmpty) return null;
+
+ return (
+
- {triggerPricePrefix} {formatAmount(order.triggerPrice, USD_DECIMALS, indexTokenPriceDecimal, true)}
+
+ {triggerPricePrefix} {formatAmount(order.triggerPrice, USD_DECIMALS, 2, true)}
+
- Swap {formatAmount(order.amountIn, fromTokenInfo.decimals, fromTokenInfo.isStable ? 2 : 4, true)}{" "}
+ Swap{" "}
+
+ {formatAmount(order.amountIn, fromTokenInfo.decimals, fromTokenInfo.isStable ? 2 : 4, true)}
+ {" "}
Collateral
Price
{formatAmount(markPrice, USD_DECIMALS, 2, true)}}
position="bottom-end"
renderContent={() => {
return (
@@ -528,8 +537,10 @@ export default function OrdersList(props) {
Collateral
-
+ ${formatAmount(position.collateralAfterFee, USD_DECIMALS, 2, true)}
+
+ }
position="bottom-start"
handleClassName={cx({ negative: position.hasLowCollateral })}
renderContent={() => {
@@ -648,7 +672,11 @@ export default function PositionsList(props) {
+ -${formatAmount(position.fundingFee, USD_DECIMALS, 2, true)}
+
+ }
textClassName="text-red-500"
/>
- ${formatAmount(position.averagePrice, USD_DECIMALS, positionPriceDecimal, true)}
- ${formatAmount(position.markPrice, USD_DECIMALS, positionPriceDecimal, true)}
- ${formatAmount(liquidationPrice, USD_DECIMALS, positionPriceDecimal, true)}
+
+ ${formatAmount(position.averagePrice, USD_DECIMALS, positionPriceDecimal, true)}
+
+
+ ${formatAmount(position.markPrice, USD_DECIMALS, positionPriceDecimal, true)}
+
+ ${formatAmount(liquidationPrice, USD_DECIMALS, positionPriceDecimal, true)}
{!hideActions && (
diff --git a/src/components/ExpressTradingEnabledBanner/ExpressTradingEnabledBanner.tsx b/src/components/ExpressTradingEnabledBanner/ExpressTradingEnabledBanner.tsx
index 4ba64b6906..c13f23d2bf 100644
--- a/src/components/ExpressTradingEnabledBanner/ExpressTradingEnabledBanner.tsx
+++ b/src/components/ExpressTradingEnabledBanner/ExpressTradingEnabledBanner.tsx
@@ -22,12 +22,10 @@ export function ExpressTradingEnabledBanner() {
return (
Express Trading is enabled. Enjoy smoother, more reliable trades!
);
}
diff --git a/src/components/ExpressTradingOutOfGasBanner.ts/ExpressTradingOutOfGasBanner.tsx b/src/components/ExpressTradingOutOfGasBanner.ts/ExpressTradingOutOfGasBanner.tsx
index 0bb84a4844..9be1d0600b 100644
--- a/src/components/ExpressTradingOutOfGasBanner.ts/ExpressTradingOutOfGasBanner.tsx
+++ b/src/components/ExpressTradingOutOfGasBanner.ts/ExpressTradingOutOfGasBanner.tsx
@@ -47,14 +47,12 @@ export function ExpressTradingOutOfGasBanner({ onClose }: { onClose: () => void
}, [history, onClose, gasPaymentTokenSymbols]);
return (
-
+ Express and One-Click Trading are unavailable due to insufficient gas balance.
+
+
);
}
diff --git a/src/components/FavoriteStar/FavoriteStar.tsx b/src/components/FavoriteStar/FavoriteStar.tsx
index 2940a2171d..170ece6fa0 100644
--- a/src/components/FavoriteStar/FavoriteStar.tsx
+++ b/src/components/FavoriteStar/FavoriteStar.tsx
@@ -1,16 +1,20 @@
import cx from "classnames";
-import { FaRegStar, FaStar } from "react-icons/fa";
+
+import StarIcon from "img/ic_star.svg?react";
+import StarFilledIcon from "img/ic_star_filled.svg?react";
export default function FavoriteStar({
isFavorite,
activeClassName,
+ className,
}: {
isFavorite?: boolean;
activeClassName?: string;
+ className?: string;
}) {
- return isFavorite ? (
-
-
- )}
- {icon}
- {children}
+
+ {Icon && (
+
{onClose && (
-
+
+ )}
+ {children}
+
-
);
}
+
+export const ColorfulButtonLink = ({ children, to, onClick, color = "blue" }: { children: React.ReactNode; to?: string; onClick?: () => void; color?: keyof typeof colorSchemas }) => {
+ const className = cx("text-slate-100 hover:text-white", colorSchemas[color].icon);
+
+ if (to) {
+ return
+ {isLoading ? Loading... : isEmpty ? emptyText : null}
+
+ );
+}
diff --git a/src/components/EventToast/AnnouncementIcon.jsx b/src/components/EventToast/AnnouncementIcon.jsx
deleted file mode 100644
index 0c062d190d..0000000000
--- a/src/components/EventToast/AnnouncementIcon.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-function Icon({ className }) {
- return (
-
- );
-}
-
-export default Icon;
diff --git a/src/components/EventToast/EventToast.css b/src/components/EventToast/EventToast.css
index 81ae81919f..648648de72 100644
--- a/src/components/EventToast/EventToast.css
+++ b/src/components/EventToast/EventToast.css
@@ -22,13 +22,13 @@
}
.single-toast {
- background: rgba(43, 49, 85, 0.85);
+ background: var(--color-slate-700);
backdrop-filter: blur(4px);
color: var(--color-white);
border: none;
position: relative;
- border-radius: 4px;
- border: 1px solid var(--color-gray-800);
+ border-radius: 8px;
+ border: 0.5px solid var(--color-slate-600);
width: 35rem;
}
.single-toast header {
@@ -36,7 +36,8 @@
justify-content: space-between;
align-items: center;
padding: 0.8rem 1.5rem;
- border-bottom: 1px solid var(--color-gray-800);
+ border-bottom: 1px solid var(--color-slate-600);
+ font-weight: 500;
}
.single-toast header .toast-title {
display: flex;
@@ -46,13 +47,13 @@
width: 2.2rem;
height: 2.2rem;
cursor: pointer;
- border-radius: 4px;
+ border-radius: 8px;
padding: 2px;
margin-left: 1.5rem;
flex-shrink: 0;
}
.single-toast header .cross-icon:hover {
- background: var(--color-gray-700);
+ background: var(--color-slate-600);
}
.single-toast header {
display: flex;
@@ -68,7 +69,7 @@
.single-toast header p {
margin: 0;
padding: 0.3875rem 0;
- margin-left: 1.1625rem;
+ margin-left: 4px;
font-size: var(--font-size-body-large);
}
diff --git a/src/components/EventToast/EventToast.tsx b/src/components/EventToast/EventToast.tsx
index 2c8b4dff0c..63b4870f6d 100644
--- a/src/components/EventToast/EventToast.tsx
+++ b/src/components/EventToast/EventToast.tsx
@@ -6,7 +6,7 @@ import { EventData } from "config/events";
import ExternalLink from "components/ExternalLink/ExternalLink";
-import Icon from "./AnnouncementIcon";
+import PlainIcon from "img/ic_plain.svg?react";
export default function EventToast({
event,
@@ -23,7 +23,7 @@ export default function EventToast({
-
{event.title}
{token.symbol}
{balance && (
-
+
diff --git a/src/components/Exchange/OrdersList.jsx b/src/components/Exchange/OrdersList.jsx
index 20890aa801..b241a77931 100644
--- a/src/components/Exchange/OrdersList.jsx
+++ b/src/components/Exchange/OrdersList.jsx
@@ -339,7 +339,9 @@ export default function OrdersList(props) {
)}
{balance > 0 && formatAmount(balance, token.decimals, 4, true)}
{balance == 0n && "-"}
@@ -31,7 +31,7 @@ export default function ExchangeWalletTokens(props) {
{token.name}
{balanceUsd !== undefined && balanceUsd > 0 && (
- ${formatAmount(balanceUsd, 30, 2, true)}
+ ${formatAmount(balanceUsd, 30, 2, true)}
)}
- ${formatAmount(collateralUSD, USD_DECIMALS, 2, true)} (
- {formatAmount(order.amountIn, fromTokenInfo.decimals, 4, true)}{" "}
+ ${formatAmount(collateralUSD, USD_DECIMALS, 2, true)} (
+ {formatAmount(order.amountIn, fromTokenInfo.decimals, 4, true)}{" "}
{fromTokenInfo.baseSymbol || fromTokenInfo.symbol})
@@ -500,7 +507,9 @@ export default function OrdersList(props) {
- {triggerPricePrefix} {formatAmount(order.triggerPrice, USD_DECIMALS, 2, true)}
+
+ {triggerPricePrefix} {formatAmount(order.triggerPrice, USD_DECIMALS, 2, true)}
+
@@ -509,7 +518,7 @@ export default function OrdersList(props) {
- ${formatAmount(collateralUSD, USD_DECIMALS, 2, true)} (
- {formatAmount(order.purchaseTokenAmount, collateralTokenInfo.decimals, 4, true)}{" "}
+ ${formatAmount(collateralUSD, USD_DECIMALS, 2, true)} (
+
+ {formatAmount(order.purchaseTokenAmount, collateralTokenInfo.decimals, 4, true)}
+ {" "}
{collateralTokenInfo.baseSymbol || collateralTokenInfo.symbol})
diff --git a/src/components/Exchange/PositionDropdown.tsx b/src/components/Exchange/PositionDropdown.tsx
index cfc0009609..d026d283e5 100644
--- a/src/components/Exchange/PositionDropdown.tsx
+++ b/src/components/Exchange/PositionDropdown.tsx
@@ -1,16 +1,17 @@
import { autoUpdate, useFloating, flip, offset, shift, FloatingPortal } from "@floating-ui/react";
import { Menu } from "@headlessui/react";
import { Trans } from "@lingui/macro";
-import "./PositionDropdown.css";
-import { AiOutlineEdit } from "react-icons/ai";
import { BiSelectMultiple } from "react-icons/bi";
import { HiDotsVertical } from "react-icons/hi";
import { RiShareBoxFill } from "react-icons/ri";
+import EditIcon from "img/ic_edit.svg?react";
import increaseLimit from "img/ic_increaselimit_16.svg";
import increaseMarket from "img/ic_increasemarket_16.svg";
import triggerClose from "img/ic_triggerclose_16.svg";
+import "./PositionDropdown.css";
+
type Props = {
handleEditCollateral?: () => void;
handleShare?: () => void;
@@ -39,8 +40,8 @@ export default function PositionDropdown({
return (
${formatAmount(position.size, USD_DECIMALS, 2, true)}
+ ${formatAmount(position.size, USD_DECIMALS, 2, true)}
{positionOrders.length > 0 && (
- Express Trading is enabled. Enjoy smoother, more reliable trades!
-
+
- Express and One-Click Trading are unavailable due to insufficient gas balance.
-
- -
+ - -
+
+ {isFavorite ?
);
}
diff --git a/src/components/FavoriteTabs/FavoriteTabs.tsx b/src/components/FavoriteTabs/FavoriteTabs.tsx
index 120f6fc6af..40ba48af42 100644
--- a/src/components/FavoriteTabs/FavoriteTabs.tsx
+++ b/src/components/FavoriteTabs/FavoriteTabs.tsx
@@ -24,14 +24,14 @@ export function FavoriteTabs({
const localizedTabOptionLabels = useLocalizedMap(tokensFavoritesTabOptionLabels);
return (
-
+
{tokensFavoritesTabOptions.map((option) => (