From b283c987a469af1dbb01d070bf48150cde48d9ef Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Mon, 19 Dec 2022 23:00:17 -0400 Subject: [PATCH 01/23] feat: use cva for button modes --- packages/web/components/buttons/button.tsx | 175 ++++++-- packages/web/components/navbar-osmo-price.tsx | 32 ++ packages/web/package.json | 9 +- packages/web/tailwind.config.js | 1 + yarn.lock | 397 ++++++++++-------- 5 files changed, 396 insertions(+), 218 deletions(-) diff --git a/packages/web/components/buttons/button.tsx b/packages/web/components/buttons/button.tsx index 4c48ecb719..064fac49c2 100644 --- a/packages/web/components/buttons/button.tsx +++ b/packages/web/components/buttons/button.tsx @@ -1,59 +1,146 @@ -import classNames from "classnames"; import { ButtonHTMLAttributes, FunctionComponent } from "react"; import { CustomClasses } from "../types"; import { IS_FRONTIER } from "../../config"; +import { cva, VariantProps } from "class-variance-authority"; -export const Button: FunctionComponent< +const button = cva( + "flex w-full place-content-center items-center py-2 text-center transition-colors disabled:cursor-default", { - mode?: "primary" | "primary-warning" | "secondary" | "tertiary"; - size?: "sm" | "normal"; - } & CustomClasses & + variants: { + mode: { + primary: [ + "border-2", + "border-wosmongton-700", + "bg-wosmongton-700", + "hover:border-wosmongton-400", + "hover:bg-wosmongton-400", + "rounded-xl", + "disabled:border-2", + "disabled:border-osmoverse-500", + "disabled:bg-osmoverse-500", + "disabled:text-osmoverse-100", + ], + "primary-warning": [ + "border-0", + "bg-rust-700", + "rounded-xl", + "disabled:border-2", + "disabled:border-osmoverse-500", + "disabled:bg-osmoverse-500", + "disabled:text-osmoverse-100", + "disabled:hover:border-unset", + "disabled:hover:bg-unset", + ], + secondary: [ + "border-2", + "bg-transparent", + "border-wosmongton-400", + "hover:border-wosmongton-200", + "rounded-xl", + "disabled:border-osmoverse-600", + "disabled:text-osmoverse-400", + ], + tertiary: [ + "border-2", + "bg-transparent", + "border-osmoverse-400", + "rounded-md", + ], + text: [ + "text-wosmongton-200", + "hover:text-rust-200", + "disabled:text-osmoverse-500", + ], + "framed-primary": [ + "bg-wosmongton-700", + "hover:bg-wosmongton-400", + "rounded-md", + "disabled:border-osmoverse-500", + "disabled:bg-osmoverse-500", + "disabled:text-osmoverse-100", + ], + "framed-secondary": [ + "border-2", + "bg-transparent", + "border-wosmongton-300", + "hover:border-wosmongton-200", + "text-wosmongton-300", + "hover:text-wosmongton-200", + "rounded-md", + "disabled:border-osmoverse-600", + "disabled:text-osmoverse-400", + ], + amount: [ + "border-2", + "bg-transparent", + "border-wosmongton-300", + "hover:border-wosmongton-200", + "text-wosmongton-300", + "hover:text-wosmongton-200", + "rounded-md", + "disabled:border-osmoverse-600", + "disabled:text-osmoverse-400", + ], + unstyled: null, + }, + size: { + sm: "h-10 px-5 button tracking-wide", + normal: "h-[56px] px-6 subtitle1 tracking-wide", + text: "w-auto h-auto block text-start tracking-wide", + framed: + "h-auto px-2 py-1 w-auto text-caption font-semibold tracking-wider", + amount: + "h-[24px] px-2 py-1 w-auto text-caption font-semibold tracking-wider", + }, + frontier: { + true: null, + false: null, + }, + }, + compoundVariants: [ + { + mode: ["primary", "primary-warning"], + frontier: true, + className: "text-osmoverse-1000", + }, + ], + defaultVariants: { + mode: "primary", + size: "normal", + }, + } +); + +const modeToDefaultSize: Partial< + Record< + NonNullable["mode"]>, + VariantProps["size"] + > +> = { + "framed-primary": "framed", + "framed-secondary": "framed", + amount: "amount", + text: "text", +}; + +export const Button: FunctionComponent< + VariantProps & + CustomClasses & ButtonHTMLAttributes > = (props) => { - const { mode = "primary", size = "normal", className, children } = props; + const { mode, size, className, children } = props; return ( ); }; diff --git a/packages/web/components/navbar-osmo-price.tsx b/packages/web/components/navbar-osmo-price.tsx index 33c8f6b15b..8ec1d5723e 100644 --- a/packages/web/components/navbar-osmo-price.tsx +++ b/packages/web/components/navbar-osmo-price.tsx @@ -114,6 +114,38 @@ const NavbarOsmoPrice = observer(() => { + {/* + + + + + + + + + + + + */} + {account.walletStatus === WalletStatus.Loaded && ( -); diff --git a/packages/web/components/buttons/button.tsx b/packages/web/components/buttons/button.tsx index 064fac49c2..307c82b800 100644 --- a/packages/web/components/buttons/button.tsx +++ b/packages/web/components/buttons/button.tsx @@ -43,8 +43,9 @@ const button = cva( tertiary: [ "border-2", "bg-transparent", - "border-osmoverse-400", + "border-wosmongton-400", "rounded-md", + "text-wosmongton-200", ], text: [ "text-wosmongton-200", @@ -81,6 +82,7 @@ const button = cva( "disabled:border-osmoverse-600", "disabled:text-osmoverse-400", ], + "special-1": ["bg-positive-gradient", "rounded-xl"], unstyled: null, }, size: { diff --git a/packages/web/components/buttons/index.ts b/packages/web/components/buttons/index.ts index fe1d5572de..358fd114ac 100644 --- a/packages/web/components/buttons/index.ts +++ b/packages/web/components/buttons/index.ts @@ -1,4 +1,3 @@ export * from "./arrow-button"; -export * from "./border-button"; export * from "./button"; export * from "./close-button"; diff --git a/packages/web/components/complex/add-liquidity.tsx b/packages/web/components/complex/add-liquidity.tsx index 90f21c935f..a839f058fe 100644 --- a/packages/web/components/complex/add-liquidity.tsx +++ b/packages/web/components/complex/add-liquidity.tsx @@ -11,7 +11,7 @@ import { InputBox } from "../../components/input"; import { Info } from "../../components/alert"; import { PoolTokenSelect } from "../../components/control/pool-token-select"; import { CustomClasses } from "../types"; -import { BorderButton } from "../buttons"; +import { Button } from "../buttons"; import { useTranslation } from "react-multi-lang"; export const AddLiquidity: FunctionComponent< @@ -174,12 +174,13 @@ export const AddLiquidity: FunctionComponent< )} {isMobile && ( - addLiquidityConfig.setMax()} > {t("components.MAX")} - + )} diff --git a/packages/web/components/complex/pool/create/step1-set-ratios.tsx b/packages/web/components/complex/pool/create/step1-set-ratios.tsx index 3125c5e474..cd2f21cf62 100644 --- a/packages/web/components/complex/pool/create/step1-set-ratios.tsx +++ b/packages/web/components/complex/pool/create/step1-set-ratios.tsx @@ -7,7 +7,7 @@ import { InputBox } from "../../../input"; import { StepProps } from "./types"; import { StepBase } from "./step-base"; import { useWindowSize } from "../../../../hooks"; -import { BorderButton } from "../../../buttons"; +import { Button } from "../../../buttons"; import { useTranslation } from "react-multi-lang"; export const Step1SetRatios: FunctionComponent = observer( @@ -45,14 +45,15 @@ export const Step1SetRatios: FunctionComponent = observer( />
{config.poolType === "weighted" && ( - config.setBalancedPercentages()} > {config.balancedPercentage.maxDecimals(0).toString()} - + )}
- removeLiquidityConfig.setPercentage("25")} disabled={removeLiquidityConfig.poolShareWithPercentage .toDec() .equals(new Dec(0))} > 25% - - +
{actionButton} diff --git a/packages/web/components/complex/transfer.tsx b/packages/web/components/complex/transfer.tsx index 5affd551f7..4173f8318c 100644 --- a/packages/web/components/complex/transfer.tsx +++ b/packages/web/components/complex/transfer.tsx @@ -9,7 +9,7 @@ import { BridgeAnimation } from "../animation/bridge"; import { SwitchWalletButton } from "../buttons/switch-wallet"; import { GradientView } from "../assets/gradient-view"; import { InputBox } from "../input"; -import { BorderButton } from "../buttons"; +import { Button } from "../buttons"; import { CheckBox } from "../control"; import { Disableable, InputProps, LoadingProps } from "../types"; import { useTranslation } from "react-multi-lang"; @@ -179,15 +179,15 @@ export const Transfer: FunctionComponent = ({ editWithdrawAddrConfig && !panelDisabled && !isEditingWithdrawAddr && ( - { setIsEditingWithdrawAddr(true); editWithdrawAddrConfig.setCustomAddress(to.address); }} > {t("assets.ibcTransfer.buttonEdit")} - + )} {isEditingWithdrawAddr && editWithdrawAddrConfig && ( { - {/* - - - - - - - - - - - - */} - {account.walletStatus === WalletStatus.Loaded && (
From 9424755f6668938067d4029b0aca420ce0724f16 Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Tue, 20 Dec 2022 17:22:56 -0400 Subject: [PATCH 03/23] feat: make pool id page button consistent --- .../components/assets/down-chevron-icon.tsx | 22 ++++++++++++++++++ packages/web/components/buttons/button.tsx | 8 +++++-- packages/web/pages/pool/[id].tsx | 23 ++++++++----------- packages/web/tailwind.config.js | 1 + 4 files changed, 38 insertions(+), 16 deletions(-) create mode 100644 packages/web/components/assets/down-chevron-icon.tsx diff --git a/packages/web/components/assets/down-chevron-icon.tsx b/packages/web/components/assets/down-chevron-icon.tsx new file mode 100644 index 0000000000..3454b49427 --- /dev/null +++ b/packages/web/components/assets/down-chevron-icon.tsx @@ -0,0 +1,22 @@ +import classNames from "classnames"; +import { FunctionComponent } from "react"; + +export const DownChevronIcon: FunctionComponent<{ + classes?: Partial>; +}> = ({ classes }) => { + return ( + + + + ); +}; diff --git a/packages/web/components/buttons/button.tsx b/packages/web/components/buttons/button.tsx index 307c82b800..6ea498c8f0 100644 --- a/packages/web/components/buttons/button.tsx +++ b/packages/web/components/buttons/button.tsx @@ -82,13 +82,17 @@ const button = cva( "disabled:border-osmoverse-600", "disabled:text-osmoverse-400", ], - "special-1": ["bg-positive-gradient", "rounded-xl"], + "special-1": [ + "bg-gradient-positive", + "rounded-xl", + "text-osmoverse-1000", + ], unstyled: null, }, size: { sm: "h-10 px-5 button tracking-wide", normal: "h-[56px] px-6 subtitle1 tracking-wide", - text: "w-auto h-auto block text-start tracking-wide", + text: "w-auto h-auto block py-0 text-start tracking-wide", framed: "h-auto px-2 py-1 w-auto text-caption font-semibold tracking-wider", amount: diff --git a/packages/web/pages/pool/[id].tsx b/packages/web/pages/pool/[id].tsx index 6486420149..403da8c0b8 100644 --- a/packages/web/pages/pool/[id].tsx +++ b/packages/web/pages/pool/[id].tsx @@ -47,6 +47,7 @@ import { Button, ArrowButton } from "../../components/buttons"; import { useTranslation } from "react-multi-lang"; import PoolComposition from "../../components/chart/pool-composition"; import useMeasure from "../../hooks/use-measure"; +import { DownChevronIcon } from "../../components/assets/down-chevron-icon"; const E = EventName.PoolDetail; @@ -506,14 +507,15 @@ const Pool: FunctionComponent = observer(() => { />
-
{ logEvent([E.showHidePoolDetails]); setShowPoolDetails(!showPoolDetails); }} > - + {showPoolDetails ? t("pool.collapseDetails") : t("pool.showDetails")} @@ -523,14 +525,9 @@ const Pool: FunctionComponent = observer(() => { "rotate-180": showPoolDetails, })} > - pool details +
- + {poolDetailConfig?.userStats && (
@@ -695,10 +692,8 @@ const Pool: FunctionComponent = observer(() => { {t("removeLiquidity.title")} + ); }; diff --git a/packages/web/pages/pool/[id].tsx b/packages/web/pages/pool/[id].tsx index 403da8c0b8..a55770d570 100644 --- a/packages/web/pages/pool/[id].tsx +++ b/packages/web/pages/pool/[id].tsx @@ -40,14 +40,13 @@ import { AssetBreakdownChart, PriceBreakdownChart, } from "../../components/chart"; -import { PoolAssetsIcon } from "../../components/assets"; +import { ChevronDownIcon, PoolAssetsIcon } from "../../components/assets"; import { BondCard } from "../../components/cards"; import { Disableable } from "../../components/types"; import { Button, ArrowButton } from "../../components/buttons"; import { useTranslation } from "react-multi-lang"; import PoolComposition from "../../components/chart/pool-composition"; import useMeasure from "../../hooks/use-measure"; -import { DownChevronIcon } from "../../components/assets/down-chevron-icon"; const E = EventName.PoolDetail; @@ -525,7 +524,7 @@ const Pool: FunctionComponent = observer(() => { "rotate-180": showPoolDetails, })} > - +
From a97bab5544c55eef06bc6997ee78283d105510f6 Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Wed, 21 Dec 2022 13:48:06 -0400 Subject: [PATCH 05/23] feat: add comments to clarify button cva --- packages/web/components/buttons/button.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/web/components/buttons/button.tsx b/packages/web/components/buttons/button.tsx index fcbc2e77a9..a348b71619 100644 --- a/packages/web/components/buttons/button.tsx +++ b/packages/web/components/buttons/button.tsx @@ -7,6 +7,14 @@ const button = cva( "flex w-full place-content-center items-center py-2 text-center transition-colors disabled:cursor-default", { variants: { + /** + * Modes should modify the following properties: + * - border + * - border color + * - border radius + * - background color + * - text color + */ mode: { primary: [ "border-2", @@ -89,6 +97,16 @@ const button = cva( ], unstyled: null, }, + /** + * Sizes should modify the following properties: + * - height + * - width + * - padding + * - font size + * - font weight + * - line height + * - letter spacing + */ size: { sm: "h-10 px-5 button tracking-wide", normal: "h-[56px] px-6 subtitle1 tracking-wide", From 014c27995724a995159e472368fcf09b7dbfbf3c Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Thu, 22 Dec 2022 19:15:27 -0400 Subject: [PATCH 06/23] improvement: bigger ratio button size --- .../components/complex/pool/create/step1-set-ratios.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/web/components/complex/pool/create/step1-set-ratios.tsx b/packages/web/components/complex/pool/create/step1-set-ratios.tsx index cd2f21cf62..06d72c47d5 100644 --- a/packages/web/components/complex/pool/create/step1-set-ratios.tsx +++ b/packages/web/components/complex/pool/create/step1-set-ratios.tsx @@ -47,9 +47,12 @@ export const Step1SetRatios: FunctionComponent = observer( {config.poolType === "weighted" && ( ); diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx index 573c886203..fbf4a5d0bc 100644 --- a/packages/web/pages/_app.tsx +++ b/packages/web/pages/_app.tsx @@ -120,6 +120,7 @@ function MyApp({ Component, pageProps }: AppProps) { typeof window !== "undefined" ? window.origin : "" }/osmosis-logo-wc.png`} /> + diff --git a/packages/web/pages/pool/[id].tsx b/packages/web/pages/pool/[id].tsx index a55770d570..4a12be89e5 100644 --- a/packages/web/pages/pool/[id].tsx +++ b/packages/web/pages/pool/[id].tsx @@ -40,7 +40,7 @@ import { AssetBreakdownChart, PriceBreakdownChart, } from "../../components/chart"; -import { ChevronDownIcon, PoolAssetsIcon } from "../../components/assets"; +import { Icon, PoolAssetsIcon } from "../../components/assets"; import { BondCard } from "../../components/cards"; import { Disableable } from "../../components/types"; import { Button, ArrowButton } from "../../components/buttons"; @@ -524,7 +524,7 @@ const Pool: FunctionComponent = observer(() => { "rotate-180": showPoolDetails, })} > - + diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg new file mode 100644 index 0000000000..25795c28b4 --- /dev/null +++ b/packages/web/public/icons/sprite.svg @@ -0,0 +1,19 @@ + + + + + + + + + + From 50659127a27d20456baef739e9277ed7d2e6c83b Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Fri, 6 Jan 2023 00:44:41 -0400 Subject: [PATCH 08/23] feat: replace all chevron down icons --- packages/web/components/assets/icon.tsx | 2 +- packages/web/components/buttons/show-more.tsx | 7 ++++--- .../control/icon-dropdown/icon-dropdown.tsx | 7 ++++--- .../web/components/control/pool-token-select.tsx | 16 +++++++++------- .../control/token-select-with-drawer.tsx | 12 ++++++------ packages/web/components/control/token-select.tsx | 12 ++++++------ .../web/components/trade-clipboard/index.tsx | 12 ++++++------ packages/web/modals/transfer-asset-select.tsx | 7 ++++--- .../web/public/icons/chevron-down-disabled.svg | 3 --- packages/web/public/icons/chevron-down.svg | 3 --- packages/web/public/icons/sprite.svg | 6 ++++++ 11 files changed, 46 insertions(+), 41 deletions(-) delete mode 100644 packages/web/public/icons/chevron-down-disabled.svg delete mode 100644 packages/web/public/icons/chevron-down.svg diff --git a/packages/web/components/assets/icon.tsx b/packages/web/components/assets/icon.tsx index 8b4c9216ba..5cd690b284 100644 --- a/packages/web/components/assets/icon.tsx +++ b/packages/web/components/assets/icon.tsx @@ -1,6 +1,6 @@ import { FunctionComponent, SVGAttributes } from "react"; -type IconId = "chevron-down" | "chevron-right"; +type IconId = "chevron-up" | "chevron-down" | "chevron-right"; /** * It takes an icon id and returns an svg element with the corresponding icon defined in /public/icons/sprite.svg. diff --git a/packages/web/components/buttons/show-more.tsx b/packages/web/components/buttons/show-more.tsx index 463c628090..da699ac23d 100644 --- a/packages/web/components/buttons/show-more.tsx +++ b/packages/web/components/buttons/show-more.tsx @@ -4,6 +4,7 @@ import classNames from "classnames"; import { ToggleProps } from "../control"; import { CustomClasses } from "../types"; import { useTranslation } from "react-multi-lang"; +import { Icon } from "../assets"; export const ShowMoreButton: FunctionComponent = ({ isOn, @@ -20,11 +21,11 @@ export const ShowMoreButton: FunctionComponent = ({ {isOn ? t("components.show.less") : t("components.show.more")}
- {isOn
diff --git a/packages/web/components/control/icon-dropdown/icon-dropdown.tsx b/packages/web/components/control/icon-dropdown/icon-dropdown.tsx index 7c64ff1ebd..583e4d7333 100644 --- a/packages/web/components/control/icon-dropdown/icon-dropdown.tsx +++ b/packages/web/components/control/icon-dropdown/icon-dropdown.tsx @@ -7,6 +7,7 @@ import classNames from "classnames"; import { MenuOptionsIconModal } from "../../../modals"; import { useTranslation } from "react-multi-lang"; import { onSelectIconDropdown, MenuDropdownIcon } from "."; +import { Icon } from "../../assets"; export type IconDropdownProps = { options: MenuDropdownIconItemProps[]; @@ -54,11 +55,11 @@ export const IconDropdown: FunctionComponent = observer(

{t(currentOption?.display ?? "")}

{currentOption && currentOption.display && ( - {``} )}
diff --git a/packages/web/components/control/pool-token-select.tsx b/packages/web/components/control/pool-token-select.tsx index 7ec6083476..62ee354721 100644 --- a/packages/web/components/control/pool-token-select.tsx +++ b/packages/web/components/control/pool-token-select.tsx @@ -1,7 +1,7 @@ import Image from "next/image"; import { FunctionComponent, useState } from "react"; import classNames from "classnames"; -import { Token, PoolAssetInfo } from "../assets"; +import { Token, PoolAssetInfo, Icon } from "../assets"; import { CustomClasses, MobileProps } from "../types"; /** Used to select a token token from within a pool. */ @@ -50,13 +50,15 @@ export const PoolTokenSelect: FunctionComponent< isMobile={isMobile} />
- diff --git a/packages/web/components/control/token-select-with-drawer.tsx b/packages/web/components/control/token-select-with-drawer.tsx index 2f93ad0fa6..82ffc65961 100644 --- a/packages/web/components/control/token-select-with-drawer.tsx +++ b/packages/web/components/control/token-select-with-drawer.tsx @@ -9,6 +9,7 @@ import classNames from "classnames"; import { TokenSelectDrawer } from "../drawers/token-select-drawer"; import { useRouter } from "next/router"; import { EventName } from "../../config"; +import { Icon } from "../assets"; /** Will display balances if provided `CoinPretty` objects. Assumes denoms are unique. */ export const TokenSelectWithDrawer: FunctionComponent<{ @@ -144,14 +145,13 @@ export const TokenSelectWithDrawer: FunctionComponent<{ )} {canSelectTokens && (
- select icon
)} diff --git a/packages/web/components/control/token-select.tsx b/packages/web/components/control/token-select.tsx index 301a5e9bc5..b2a77d148c 100644 --- a/packages/web/components/control/token-select.tsx +++ b/packages/web/components/control/token-select.tsx @@ -11,6 +11,7 @@ import { useWindowSize, } from "../../hooks"; import classNames from "classnames"; +import { Icon } from "../assets"; /** Will display balances if provided `CoinPretty` objects. Assumes denoms are unique. */ export const TokenSelect: FunctionComponent<{ @@ -160,14 +161,13 @@ export const TokenSelect: FunctionComponent<{ )} {canSelectTokens && (
- select icon
)} diff --git a/packages/web/components/trade-clipboard/index.tsx b/packages/web/components/trade-clipboard/index.tsx index 379073b46d..c2b604e807 100644 --- a/packages/web/components/trade-clipboard/index.tsx +++ b/packages/web/components/trade-clipboard/index.tsx @@ -32,6 +32,7 @@ import { useTranslation } from "react-multi-lang"; import { tError } from "../localization"; import { TokenSelectWithDrawer } from "../control/token-select-with-drawer"; import useMeasure from "../../hooks/use-measure"; +import { Icon } from "../assets"; export const TradeClipboard: FunctionComponent<{ // IMPORTANT: Pools should be memoized!! @@ -935,16 +936,15 @@ export const TradeClipboard: FunctionComponent<{ height={24} width={24} /> - show estimates
diff --git a/packages/web/modals/transfer-asset-select.tsx b/packages/web/modals/transfer-asset-select.tsx index ada9c98ae1..671b83757d 100644 --- a/packages/web/modals/transfer-asset-select.tsx +++ b/packages/web/modals/transfer-asset-select.tsx @@ -13,6 +13,7 @@ import type { SourceChain } from "../integrations"; import { useConnectWalletModalRedirect } from "../hooks"; import { ModalBase, ModalBaseProps } from "./base"; import { useTranslation } from "react-multi-lang"; +import { Icon } from "../components/assets"; const IS_TESTNET = process.env.NEXT_PUBLIC_IS_TESTNET === "true"; @@ -153,11 +154,11 @@ export const TransferAssetSelectModal: FunctionComponent< "rotate-180": isSourceChainDropdownOpen, })} > - dropdown icon )} diff --git a/packages/web/public/icons/chevron-down-disabled.svg b/packages/web/public/icons/chevron-down-disabled.svg deleted file mode 100644 index c54c05eebc..0000000000 --- a/packages/web/public/icons/chevron-down-disabled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/web/public/icons/chevron-down.svg b/packages/web/public/icons/chevron-down.svg deleted file mode 100644 index 6ef4e22416..0000000000 --- a/packages/web/public/icons/chevron-down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg index 25795c28b4..fd80f6e846 100644 --- a/packages/web/public/icons/sprite.svg +++ b/packages/web/public/icons/sprite.svg @@ -3,6 +3,12 @@ xmlns:xlink="http://www.w3.org/1999/xlink" > + + + Date: Fri, 6 Jan 2023 00:54:08 -0400 Subject: [PATCH 09/23] feat: replace chevron right icons --- packages/web/components/control/page-list.tsx | 7 ++++--- packages/web/components/table/assets-table.tsx | 11 ++++++----- packages/web/public/icons/chevron-right-disabled.svg | 3 --- packages/web/public/icons/chevron-right-rust.svg | 3 --- packages/web/public/icons/chevron-right.svg | 3 --- 5 files changed, 10 insertions(+), 17 deletions(-) delete mode 100644 packages/web/public/icons/chevron-right-disabled.svg delete mode 100644 packages/web/public/icons/chevron-right-rust.svg delete mode 100644 packages/web/public/icons/chevron-right.svg diff --git a/packages/web/components/control/page-list.tsx b/packages/web/components/control/page-list.tsx index 922552193e..d0fe7751c5 100644 --- a/packages/web/components/control/page-list.tsx +++ b/packages/web/components/control/page-list.tsx @@ -3,6 +3,7 @@ import React, { FunctionComponent, useState, useRef, useEffect } from "react"; import classNames from "classnames"; import { NumberSelectProps } from "./types"; import { CustomClasses } from "../types"; +import { Icon } from "../assets"; interface Props extends Omit, CustomClasses { /** Allow user to edit page number directly. Off by default. */ @@ -132,9 +133,9 @@ export const PageList: FunctionComponent = ({ width={22} /> ) : ( - right diff --git a/packages/web/components/table/assets-table.tsx b/packages/web/components/table/assets-table.tsx index 0e14a7f0e6..0ddcc937dd 100644 --- a/packages/web/components/table/assets-table.tsx +++ b/packages/web/components/table/assets-table.tsx @@ -30,6 +30,7 @@ import { Table } from "."; import { EventName } from "../../config/user-analytics-v2"; import { observer } from "mobx-react-lite"; import { useTranslation } from "react-multi-lang"; +import { Icon } from "../assets"; interface Props { nativeBalances: CoinBalance[]; @@ -466,11 +467,11 @@ export const AssetsTable: FunctionComponent = observer( (assetData.chainId && assetData.chainId === chainStore.osmosis.chainId) ) && ( - select asset )} diff --git a/packages/web/public/icons/chevron-right-disabled.svg b/packages/web/public/icons/chevron-right-disabled.svg deleted file mode 100644 index 28ae5ef64f..0000000000 --- a/packages/web/public/icons/chevron-right-disabled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/web/public/icons/chevron-right-rust.svg b/packages/web/public/icons/chevron-right-rust.svg deleted file mode 100644 index 811452aa07..0000000000 --- a/packages/web/public/icons/chevron-right-rust.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/web/public/icons/chevron-right.svg b/packages/web/public/icons/chevron-right.svg deleted file mode 100644 index 0152b03763..0000000000 --- a/packages/web/public/icons/chevron-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From c74d8fc0bedbf8ae8497bddeb486849952ca8d5d Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Fri, 6 Jan 2023 00:57:24 -0400 Subject: [PATCH 10/23] feat: replace all chevron-up icons --- packages/web/components/cards/bond-card.tsx | 12 ++++++------ .../web/public/icons/chevron-up-osmoverse-400.svg | 3 --- packages/web/public/icons/chevron-up.svg | 5 ----- 3 files changed, 6 insertions(+), 14 deletions(-) delete mode 100644 packages/web/public/icons/chevron-up-osmoverse-400.svg delete mode 100644 packages/web/public/icons/chevron-up.svg diff --git a/packages/web/components/cards/bond-card.tsx b/packages/web/components/cards/bond-card.tsx index 0525ee0b4e..1a2ef12303 100644 --- a/packages/web/components/cards/bond-card.tsx +++ b/packages/web/components/cards/bond-card.tsx @@ -10,7 +10,7 @@ import moment from "dayjs"; import { Duration } from "dayjs/plugin/duration"; import { CoinPretty, Dec, PricePretty, RatePretty } from "@keplr-wallet/unit"; import { BondDuration } from "@osmosis-labs/stores"; -import { FallbackImg } from "../assets"; +import { FallbackImg, Icon } from "../assets"; import { useTranslation } from "react-multi-lang"; import { coinFormatter, priceFormatter } from "../../utils/formatter"; import { UnlockIcon } from "../assets/unlock-icon"; @@ -255,11 +255,11 @@ const Drawer: FunctionComponent<{ "rotate-180": drawerUp, })} > - details diff --git a/packages/web/public/icons/chevron-up-osmoverse-400.svg b/packages/web/public/icons/chevron-up-osmoverse-400.svg deleted file mode 100644 index fa51bfc091..0000000000 --- a/packages/web/public/icons/chevron-up-osmoverse-400.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/web/public/icons/chevron-up.svg b/packages/web/public/icons/chevron-up.svg deleted file mode 100644 index 46a8d8d81f..0000000000 --- a/packages/web/public/icons/chevron-up.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - \ No newline at end of file From 27aedf86be1775af9c0b59bd41b3654370e7eb78 Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Fri, 6 Jan 2023 01:00:51 -0400 Subject: [PATCH 11/23] feat: replace all chevron left icons --- packages/web/components/assets/icon.tsx | 2 +- packages/web/components/control/page-list.tsx | 6 +++--- packages/web/public/icons/chevron-left.svg | 3 --- packages/web/public/icons/sprite.svg | 6 ++++++ 4 files changed, 10 insertions(+), 7 deletions(-) delete mode 100644 packages/web/public/icons/chevron-left.svg diff --git a/packages/web/components/assets/icon.tsx b/packages/web/components/assets/icon.tsx index 5cd690b284..309a0e69ae 100644 --- a/packages/web/components/assets/icon.tsx +++ b/packages/web/components/assets/icon.tsx @@ -1,6 +1,6 @@ import { FunctionComponent, SVGAttributes } from "react"; -type IconId = "chevron-up" | "chevron-down" | "chevron-right"; +type IconId = "chevron-up" | "chevron-down" | "chevron-left" | "chevron-right"; /** * It takes an icon id and returns an svg element with the corresponding icon defined in /public/icons/sprite.svg. diff --git a/packages/web/components/control/page-list.tsx b/packages/web/components/control/page-list.tsx index d0fe7751c5..7522c4508f 100644 --- a/packages/web/components/control/page-list.tsx +++ b/packages/web/components/control/page-list.tsx @@ -56,9 +56,9 @@ export const PageList: FunctionComponent = ({ )} >
- left diff --git a/packages/web/public/icons/chevron-left.svg b/packages/web/public/icons/chevron-left.svg deleted file mode 100644 index 620b9bd455..0000000000 --- a/packages/web/public/icons/chevron-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg index fd80f6e846..8257e8349a 100644 --- a/packages/web/public/icons/sprite.svg +++ b/packages/web/public/icons/sprite.svg @@ -15,6 +15,12 @@ fill="currentColor" /> + + + Date: Fri, 6 Jan 2023 01:03:15 -0400 Subject: [PATCH 12/23] improvement: remove unused imports --- packages/web/components/buttons/show-more.tsx | 1 - packages/web/components/control/pool-token-select.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/web/components/buttons/show-more.tsx b/packages/web/components/buttons/show-more.tsx index da699ac23d..f6e8cb449f 100644 --- a/packages/web/components/buttons/show-more.tsx +++ b/packages/web/components/buttons/show-more.tsx @@ -1,4 +1,3 @@ -import Image from "next/image"; import { FunctionComponent } from "react"; import classNames from "classnames"; import { ToggleProps } from "../control"; diff --git a/packages/web/components/control/pool-token-select.tsx b/packages/web/components/control/pool-token-select.tsx index 62ee354721..3704efc949 100644 --- a/packages/web/components/control/pool-token-select.tsx +++ b/packages/web/components/control/pool-token-select.tsx @@ -1,4 +1,3 @@ -import Image from "next/image"; import { FunctionComponent, useState } from "react"; import classNames from "classnames"; import { Token, PoolAssetInfo, Icon } from "../assets"; From 40e2fab2d5b9ece04de02399e72ba767f7de0013 Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Fri, 6 Jan 2023 03:05:33 -0400 Subject: [PATCH 13/23] fix: enter not changing asset --- packages/web/components/trade-clipboard/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web/components/trade-clipboard/index.tsx b/packages/web/components/trade-clipboard/index.tsx index c2b604e807..c9f2e0e447 100644 --- a/packages/web/components/trade-clipboard/index.tsx +++ b/packages/web/components/trade-clipboard/index.tsx @@ -681,9 +681,11 @@ export const TradeClipboard: FunctionComponent<{ )} selectedTokenDenom={tradeTokenInConfig.sendCurrency.coinDenom} onSelect={(tokenDenom: string) => { - const tokenInCurrency = tradeableCurrencies.find( - (currency) => currency.coinDenom === tokenDenom - ); + const tokenInCurrency = chainStore + .getChain(chainStore.osmosis.chainId) + .currencies.find( + (currency) => currency.coinDenom === tokenDenom + ); if (tokenInCurrency) { tradeTokenInConfig.setSendCurrency(tokenInCurrency); } From ddd10a406c263e4a9b08886cbe6889759203248c Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Fri, 6 Jan 2023 03:18:17 -0400 Subject: [PATCH 14/23] improvement: use ref for getting up to date value --- packages/web/components/trade-clipboard/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/web/components/trade-clipboard/index.tsx b/packages/web/components/trade-clipboard/index.tsx index c9f2e0e447..34efc8a4e9 100644 --- a/packages/web/components/trade-clipboard/index.tsx +++ b/packages/web/components/trade-clipboard/index.tsx @@ -33,6 +33,7 @@ import { tError } from "../localization"; import { TokenSelectWithDrawer } from "../control/token-select-with-drawer"; import useMeasure from "../../hooks/use-measure"; import { Icon } from "../assets"; +import useLatest from "../../hooks/use-latest"; export const TradeClipboard: FunctionComponent<{ // IMPORTANT: Pools should be memoized!! @@ -58,6 +59,7 @@ export const TradeClipboard: FunctionComponent<{ const tradeableCurrencies = chainStore.getChain( chainStore.osmosis.chainId ).currencies; + const tradeableCurrenciesRef = useLatest(tradeableCurrencies); const account = accountStore.getAccount(chainId); const queries = queriesStore.get(chainId); @@ -681,11 +683,9 @@ export const TradeClipboard: FunctionComponent<{ )} selectedTokenDenom={tradeTokenInConfig.sendCurrency.coinDenom} onSelect={(tokenDenom: string) => { - const tokenInCurrency = chainStore - .getChain(chainStore.osmosis.chainId) - .currencies.find( - (currency) => currency.coinDenom === tokenDenom - ); + const tokenInCurrency = tradeableCurrenciesRef.current.find( + (currency) => currency.coinDenom === tokenDenom + ); if (tokenInCurrency) { tradeTokenInConfig.setSendCurrency(tokenInCurrency); } From 824e07feb432ac8cde821514f3c0155ed9395c7b Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Fri, 6 Jan 2023 12:26:34 -0400 Subject: [PATCH 15/23] fix: add fix to token out too --- packages/web/components/trade-clipboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/trade-clipboard/index.tsx b/packages/web/components/trade-clipboard/index.tsx index 34efc8a4e9..892d5819a3 100644 --- a/packages/web/components/trade-clipboard/index.tsx +++ b/packages/web/components/trade-clipboard/index.tsx @@ -845,7 +845,7 @@ export const TradeClipboard: FunctionComponent<{ )} selectedTokenDenom={tradeTokenInConfig.outCurrency.coinDenom} onSelect={(tokenDenom: string) => { - const tokenOutCurrency = tradeableCurrencies.find( + const tokenOutCurrency = tradeableCurrenciesRef.current.find( (currency) => currency.coinDenom === tokenDenom ); if (tokenOutCurrency) { From 87285a27c050cf95f9d12cd93fcc520d2a4ee16d Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Tue, 10 Jan 2023 00:49:03 -0400 Subject: [PATCH 16/23] feat: add icon button --- packages/web/components/assets/icon.tsx | 7 ++- packages/web/components/buttons/button.tsx | 10 ++++ .../web/components/buttons/icon-button.tsx | 41 ++++++++++++++++ packages/web/components/main-menu.tsx | 18 ++++--- packages/web/components/navbar/index.tsx | 47 ++++++------------- .../web/components/trade-clipboard/index.tsx | 24 ++++++---- packages/web/components/types.ts | 4 +- packages/web/public/icons/setting-white.svg | 4 -- packages/web/public/icons/setting.svg | 4 -- packages/web/public/icons/sprite.svg | 10 ++++ 10 files changed, 109 insertions(+), 60 deletions(-) create mode 100644 packages/web/components/buttons/icon-button.tsx delete mode 100644 packages/web/public/icons/setting-white.svg delete mode 100644 packages/web/public/icons/setting.svg diff --git a/packages/web/components/assets/icon.tsx b/packages/web/components/assets/icon.tsx index 309a0e69ae..75c5bc0bfd 100644 --- a/packages/web/components/assets/icon.tsx +++ b/packages/web/components/assets/icon.tsx @@ -1,6 +1,11 @@ import { FunctionComponent, SVGAttributes } from "react"; -type IconId = "chevron-up" | "chevron-down" | "chevron-left" | "chevron-right"; +type IconId = + | "chevron-up" + | "chevron-down" + | "chevron-left" + | "chevron-right" + | "setting"; /** * It takes an icon id and returns an svg element with the corresponding icon defined in /public/icons/sprite.svg. diff --git a/packages/web/components/buttons/button.tsx b/packages/web/components/buttons/button.tsx index 9b535fd8c0..40ab470aba 100644 --- a/packages/web/components/buttons/button.tsx +++ b/packages/web/components/buttons/button.tsx @@ -95,6 +95,15 @@ const button = cva( "rounded-xl", "text-osmoverse-1000", ], + "icon-primary": [ + "text-osmoverse-400", + "hover:text-white-full", + "bg-osmoverse-700", + "hover:bg-osmoverse-600", + "rounded-xl", + "disabled:border-osmoverse-500", + "disabled:bg-osmoverse-500", + ], unstyled: null, }, /** @@ -108,6 +117,7 @@ const button = cva( * - letter spacing */ size: { + "sm-no-padding": "h-10 button tracking-wide", sm: "h-10 px-5 button tracking-wide", normal: "h-[56px] px-6 subtitle1 tracking-wide", text: "w-auto h-auto block py-0 text-start tracking-wide", diff --git a/packages/web/components/buttons/icon-button.tsx b/packages/web/components/buttons/icon-button.tsx new file mode 100644 index 0000000000..efa538a0a3 --- /dev/null +++ b/packages/web/components/buttons/icon-button.tsx @@ -0,0 +1,41 @@ +import React, { + cloneElement, + ComponentProps, + FunctionComponent, + isValidElement, + ReactNode, +} from "react"; +import { Button } from "./button"; + +/** + * Renders an icon within a button. + */ +const IconButton: FunctionComponent< + { + icon?: ReactNode; + "aria-label": string; + } & ComponentProps +> = (props) => { + const { icon, children, "aria-label": ariaLabel, ...rest } = props; + + const element = icon || children; + const _children = isValidElement(element) + ? cloneElement(element as any, { + "aria-hidden": true, + focusable: false, + }) + : null; + + return ( + + ); +}; + +export default IconButton; diff --git a/packages/web/components/main-menu.tsx b/packages/web/components/main-menu.tsx index 0798f9817a..c318d8b9e4 100644 --- a/packages/web/components/main-menu.tsx +++ b/packages/web/components/main-menu.tsx @@ -2,7 +2,7 @@ import Image from "next/image"; import Link from "next/link"; import Head from "next/head"; import { useRouter } from "next/router"; -import { FunctionComponent } from "react"; +import { FunctionComponent, isValidElement } from "react"; import classNames from "classnames"; import { IS_FRONTIER } from "../config"; import { useAmplitudeAnalytics } from "../hooks"; @@ -68,12 +68,16 @@ export const MainMenu: FunctionComponent<{ selected ? "opacity-100" : "opacity-60" )} > - menu icon + {typeof icon === "string" ? ( + menu icon + ) : ( + icon + )}

+ ), })} /> @@ -96,13 +105,14 @@ export const NavBar: FunctionComponent<

- } onClick={() => { // allow global event to close dropdown when clicking settings button if (!settingsDropdownOpen) setSettingsDropdownOpen(true); }} + className="px-3" /> {settingsDropdownOpen && ( @@ -122,33 +132,6 @@ export const NavBar: FunctionComponent< ); }); -const NavBarButton: FunctionComponent< - { - iconurl: string; - hovericonurl: string; - } & ButtonHTMLAttributes -> = (props) => { - const { iconurl, hovericonurl } = props; - const [hovered, setHovered] = useState(false); - - return ( - - ); -}; - const SettingsDropdown: FunctionComponent<{ userSettings: IUserSetting[]; }> = observer(({ userSettings }) => { diff --git a/packages/web/components/trade-clipboard/index.tsx b/packages/web/components/trade-clipboard/index.tsx index 892d5819a3..7218e3ff52 100644 --- a/packages/web/components/trade-clipboard/index.tsx +++ b/packages/web/components/trade-clipboard/index.tsx @@ -5,6 +5,7 @@ import { useState, useMemo, useCallback, + Fragment, } from "react"; import { WalletStatus } from "@keplr-wallet/stores"; import { AppCurrency, Currency } from "@keplr-wallet/types"; @@ -34,6 +35,7 @@ import { TokenSelectWithDrawer } from "../control/token-select-with-drawer"; import useMeasure from "../../hooks/use-measure"; import { Icon } from "../assets"; import useLatest from "../../hooks/use-latest"; +import { Transition } from "@headlessui/react"; export const TradeClipboard: FunctionComponent<{ // IMPORTANT: Pools should be memoized!! @@ -448,26 +450,26 @@ export const TradeClipboard: FunctionComponent<{ containerClassName )} > + {/** Overlay */} + {isSettingOpen && ( +
+ )} +
{t("swap.title")}
{isSettingOpen && ( @@ -490,7 +492,9 @@ export const TradeClipboard: FunctionComponent<{ key={slippage.index} className={classNames( "flex h-8 w-full cursor-pointer items-center justify-center rounded-lg bg-osmoverse-700", - { "border-2 border-wosmongton-200": slippage.selected } + { + "border-2 border-wosmongton-200": slippage.selected, + } )} onClick={(e) => { e.preventDefault(); diff --git a/packages/web/components/types.ts b/packages/web/components/types.ts index 86b11f1b53..07f39e3ee3 100644 --- a/packages/web/components/types.ts +++ b/packages/web/components/types.ts @@ -1,10 +1,10 @@ -import { MouseEventHandler, ReactElement } from "react"; +import { MouseEventHandler, ReactElement, ReactNode } from "react"; import { AmplitudeEvent } from "../config"; export type MainLayoutMenu = { label: string; link: string | MouseEventHandler; - icon: string; + icon: string | ReactNode; iconSelected?: string; selectionTest?: RegExp; amplitudeEvent?: AmplitudeEvent; diff --git a/packages/web/public/icons/setting-white.svg b/packages/web/public/icons/setting-white.svg deleted file mode 100644 index 95cece387c..0000000000 --- a/packages/web/public/icons/setting-white.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/web/public/icons/setting.svg b/packages/web/public/icons/setting.svg deleted file mode 100644 index 65f1c7ac9f..0000000000 --- a/packages/web/public/icons/setting.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg index 8257e8349a..cd2201d0c0 100644 --- a/packages/web/public/icons/sprite.svg +++ b/packages/web/public/icons/sprite.svg @@ -27,5 +27,15 @@ fill="currentcolor" /> + + + + From a2c67e52f16694d90ca0234fbc318eddd2b3fa91 Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Tue, 10 Jan 2023 00:54:13 -0400 Subject: [PATCH 17/23] improvement: remove unused import --- packages/web/components/main-menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/main-menu.tsx b/packages/web/components/main-menu.tsx index c318d8b9e4..19cef2259e 100644 --- a/packages/web/components/main-menu.tsx +++ b/packages/web/components/main-menu.tsx @@ -2,7 +2,7 @@ import Image from "next/image"; import Link from "next/link"; import Head from "next/head"; import { useRouter } from "next/router"; -import { FunctionComponent, isValidElement } from "react"; +import { FunctionComponent } from "react"; import classNames from "classnames"; import { IS_FRONTIER } from "../config"; import { useAmplitudeAnalytics } from "../hooks"; From 333b333ecc3277bbfbab5580c0b916f387196bb2 Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Tue, 10 Jan 2023 00:56:56 -0400 Subject: [PATCH 18/23] improvement: remove unused imports --- packages/web/components/trade-clipboard/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/web/components/trade-clipboard/index.tsx b/packages/web/components/trade-clipboard/index.tsx index 7218e3ff52..0aa62ddf49 100644 --- a/packages/web/components/trade-clipboard/index.tsx +++ b/packages/web/components/trade-clipboard/index.tsx @@ -5,7 +5,6 @@ import { useState, useMemo, useCallback, - Fragment, } from "react"; import { WalletStatus } from "@keplr-wallet/stores"; import { AppCurrency, Currency } from "@keplr-wallet/types"; @@ -35,7 +34,6 @@ import { TokenSelectWithDrawer } from "../control/token-select-with-drawer"; import useMeasure from "../../hooks/use-measure"; import { Icon } from "../assets"; import useLatest from "../../hooks/use-latest"; -import { Transition } from "@headlessui/react"; export const TradeClipboard: FunctionComponent<{ // IMPORTANT: Pools should be memoized!! From ed9465b241eb0fcb8b1448b45950656e5a830ee0 Mon Sep 17 00:00:00 2001 From: Jose Felix Date: Fri, 13 Jan 2023 03:45:26 -0400 Subject: [PATCH 19/23] feat: add cva to search box --- packages/web/components/assets/icon.tsx | 3 +- packages/web/components/buttons/button.tsx | 4 +- packages/web/components/control/switch.tsx | 4 +- .../drawers/token-select-drawer.tsx | 1 + packages/web/components/input/search-box.tsx | 44 +++++++++++++++---- .../web/components/table/assets-table.tsx | 1 + packages/web/public/icons/search.svg | 4 -- packages/web/public/icons/sprite.svg | 18 ++++++++ 8 files changed, 62 insertions(+), 17 deletions(-) delete mode 100644 packages/web/public/icons/search.svg diff --git a/packages/web/components/assets/icon.tsx b/packages/web/components/assets/icon.tsx index 75c5bc0bfd..458853a84d 100644 --- a/packages/web/components/assets/icon.tsx +++ b/packages/web/components/assets/icon.tsx @@ -5,7 +5,8 @@ type IconId = | "chevron-down" | "chevron-left" | "chevron-right" - | "setting"; + | "setting" + | "search"; /** * It takes an icon id and returns an svg element with the corresponding icon defined in /public/icons/sprite.svg. diff --git a/packages/web/components/buttons/button.tsx b/packages/web/components/buttons/button.tsx index 40ab470aba..28c0cdd613 100644 --- a/packages/web/components/buttons/button.tsx +++ b/packages/web/components/buttons/button.tsx @@ -8,7 +8,7 @@ const button = cva( { variants: { /** - * Modes should modify the following properties: + * Modes modify the following properties: * - border * - border color * - border radius @@ -107,7 +107,7 @@ const button = cva( unstyled: null, }, /** - * Sizes should modify the following properties: + * Sizes modify the following properties: * - height * - width * - padding diff --git a/packages/web/components/control/switch.tsx b/packages/web/components/control/switch.tsx index e843f62c59..1a25158b23 100644 --- a/packages/web/components/control/switch.tsx +++ b/packages/web/components/control/switch.tsx @@ -28,7 +28,7 @@ export const Switch: FunctionComponent< containerClassName )} > - {labelPosition === "left" && ( + {labelPosition === "left" && children && (
onToggle(e.target.checked)} /> - {labelPosition === "right" && ( + {labelPosition === "right" && children && (
diff --git a/packages/web/components/input/search-box.tsx b/packages/web/components/input/search-box.tsx index 46d59cabe4..bfe087f276 100644 --- a/packages/web/components/input/search-box.tsx +++ b/packages/web/components/input/search-box.tsx @@ -1,11 +1,39 @@ -import Image from "next/image"; import { DOMAttributes, forwardRef, useState } from "react"; import classNames from "classnames"; import { InputProps, Disableable, CustomClasses } from "../types"; +import { Icon } from "../assets"; +import { cva, VariantProps } from "class-variance-authority"; + +const searchBoxClasses = cva( + "flex flex-nowrap items-center justify-between gap-2 rounded-xl border border-osmoverse-500 transition-colors [&_input]:placeholder:text-osmoverse-500 [&_input]:placeholder:font-medium", + { + variants: { + /** + * Sizes modify the following properties: + * - height + * - width + * - padding + * - font size + * - font weight + * - line height + * - letter spacing + */ + size: { + small: "h-10 px-5 w-max [&_input]:text-body2 [&_input]:font-body2", + medium: "h-12 px-5 w-max [&_input]:text-body2 [&_input]:font-body2", + large: "h-14 px-5 w-max [&_input]:text-body1 [&_input]:font-body2", + }, + }, + defaultVariants: { + size: "medium", + }, + } +); type SearchBoxProps = Omit, "currentValue"> & Disableable & - CustomClasses & { + CustomClasses & + VariantProps & { type?: string; currentValue?: string; onKeyDown?: DOMAttributes["onKeyDown"]; @@ -23,6 +51,7 @@ export const SearchBox = forwardRef( autoFocus, className, onKeyDown, + size, }, ref ) { @@ -31,22 +60,21 @@ export const SearchBox = forwardRef( return (
-
- search +
+