From 81cf42600ba1fa35e8eae634bb30092a64b62651 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Thu, 10 Nov 2022 15:04:31 -0300 Subject: [PATCH 01/25] chore: Add export for NetworkButton component --- src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.ts b/src/index.ts index 0565a9ca..b4ec3795 100644 --- a/src/index.ts +++ b/src/index.ts @@ -28,6 +28,7 @@ export * from "./components/ThemeSwitcher"; export * from "./components/Tabs"; export * from "./components/ScrollToTop"; export * from "./components/RunFiatButton"; +export { default as NetworkButton } from "./widgets/Navbar/NetworkButton"; // Hooks export * from "./hooks"; From f61f8b64e712714d911ab09ef04131e70a1befb6 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 15 Nov 2022 11:35:38 -0300 Subject: [PATCH 02/25] chore: Added supportedchains to networkbutton --- src/widgets/Navbar/NetworkButton.tsx | 9 +++++---- src/widgets/NetworkModal/SelectNetworkModal.tsx | 12 ++++++++---- src/widgets/NetworkModal/useNetworkModal.tsx | 10 ++++++++-- 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/widgets/Navbar/NetworkButton.tsx b/src/widgets/Navbar/NetworkButton.tsx index 6b1784ed..a51db3b0 100644 --- a/src/widgets/Navbar/NetworkButton.tsx +++ b/src/widgets/Navbar/NetworkButton.tsx @@ -2,19 +2,20 @@ import React from "react"; import { ArrowDropDownIcon } from "../../components/Svg"; import { useNetworkModal, SwitchNetwork } from "../NetworkModal"; -import { NETWORK_ICON, NETWORK_LABEL } from "../NetworkModal/config"; +import { ChainId, NETWORK_ICON, NETWORK_LABEL } from "../NetworkModal/config"; import { Button } from "../../components/Button"; import { Text } from "../../components/Text"; import styles from "./styles"; -interface Props { +export interface Props { chainId: number; switchNetwork: SwitchNetwork; t: (key: string) => string; + supportedChains?: ChainId[]; } -const NetworkButton: React.FC = ({ chainId, switchNetwork, t }) => { - const { onPresentNetworkModal } = useNetworkModal(switchNetwork, chainId, t); +const NetworkButton: React.FC = ({ chainId, switchNetwork, t, supportedChains }) => { + const { onPresentNetworkModal } = useNetworkModal(switchNetwork, chainId, t, supportedChains); const Icon = NETWORK_ICON[chainId]; return ( diff --git a/src/widgets/NetworkModal/SelectNetworkModal.tsx b/src/widgets/NetworkModal/SelectNetworkModal.tsx index cf1eb87c..9c25a960 100644 --- a/src/widgets/NetworkModal/SelectNetworkModal.tsx +++ b/src/widgets/NetworkModal/SelectNetworkModal.tsx @@ -3,21 +3,25 @@ import { partition } from "lodash"; import { Modal, ModalHeader } from "../Modal"; import { SwitchNetwork } from "./types"; import { Heading } from "../../components/Heading"; -import networks from "./config"; +import networks, { ChainId } from "./config"; import NetworkCard from "./NetworkCard"; import { Svg } from "../../components/Svg"; import { Flex } from "../../components/Flex"; import styles from "./styles"; -interface Props { +export interface Props { switchNetwork: SwitchNetwork; chainId: number; t: (key: string) => string; onDismiss?: () => void; + supportedChains?: ChainId[]; } -const SelectNetworkModal: React.FC = ({ switchNetwork, chainId, t, onDismiss }) => { - const [selectedNetwork, networkList] = partition(networks, (network) => network.chainId === chainId); +const SelectNetworkModal: React.FC = ({ switchNetwork, chainId, t, onDismiss, supportedChains }) => { + const filteredNetworks = supportedChains + ? networks.filter((network) => supportedChains?.includes(network.chainId)) + : networks; + const [selectedNetwork, networkList] = partition(filteredNetworks, (network) => network.chainId === chainId); return ( diff --git a/src/widgets/NetworkModal/useNetworkModal.tsx b/src/widgets/NetworkModal/useNetworkModal.tsx index 9675e88b..58c70ee9 100644 --- a/src/widgets/NetworkModal/useNetworkModal.tsx +++ b/src/widgets/NetworkModal/useNetworkModal.tsx @@ -2,14 +2,20 @@ import React from "react"; import { useModal } from "../Modal"; import { SwitchNetwork } from "./types"; import SelectNetworkModal from "./SelectNetworkModal"; +import { ChainId } from "./config"; interface ReturnType { onPresentNetworkModal: () => void; } -const useNetworkModal = (switchNetwork: SwitchNetwork, chainId: number, t: (key: string) => string): ReturnType => { +const useNetworkModal = ( + switchNetwork: SwitchNetwork, + chainId: number, + t: (key: string) => string, + supportedChains?: ChainId[] +): ReturnType => { const [onPresentNetworkModal] = useModal( - , + , true, false, "NetworkModal" From 37ac4535b1dfed4d5eb703af6b42997258980342 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 15 Nov 2022 12:41:10 -0300 Subject: [PATCH 03/25] chore: Changed param type --- src/widgets/Navbar/NetworkButton.tsx | 4 ++-- src/widgets/NetworkModal/SelectNetworkModal.tsx | 4 ++-- src/widgets/NetworkModal/useNetworkModal.tsx | 3 +-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/widgets/Navbar/NetworkButton.tsx b/src/widgets/Navbar/NetworkButton.tsx index a51db3b0..6a4a1241 100644 --- a/src/widgets/Navbar/NetworkButton.tsx +++ b/src/widgets/Navbar/NetworkButton.tsx @@ -2,7 +2,7 @@ import React from "react"; import { ArrowDropDownIcon } from "../../components/Svg"; import { useNetworkModal, SwitchNetwork } from "../NetworkModal"; -import { ChainId, NETWORK_ICON, NETWORK_LABEL } from "../NetworkModal/config"; +import { NETWORK_ICON, NETWORK_LABEL } from "../NetworkModal/config"; import { Button } from "../../components/Button"; import { Text } from "../../components/Text"; import styles from "./styles"; @@ -11,7 +11,7 @@ export interface Props { chainId: number; switchNetwork: SwitchNetwork; t: (key: string) => string; - supportedChains?: ChainId[]; + supportedChains?: number[]; } const NetworkButton: React.FC = ({ chainId, switchNetwork, t, supportedChains }) => { diff --git a/src/widgets/NetworkModal/SelectNetworkModal.tsx b/src/widgets/NetworkModal/SelectNetworkModal.tsx index 9c25a960..e26d534d 100644 --- a/src/widgets/NetworkModal/SelectNetworkModal.tsx +++ b/src/widgets/NetworkModal/SelectNetworkModal.tsx @@ -3,7 +3,7 @@ import { partition } from "lodash"; import { Modal, ModalHeader } from "../Modal"; import { SwitchNetwork } from "./types"; import { Heading } from "../../components/Heading"; -import networks, { ChainId } from "./config"; +import networks from "./config"; import NetworkCard from "./NetworkCard"; import { Svg } from "../../components/Svg"; import { Flex } from "../../components/Flex"; @@ -14,7 +14,7 @@ export interface Props { chainId: number; t: (key: string) => string; onDismiss?: () => void; - supportedChains?: ChainId[]; + supportedChains?: number[]; } const SelectNetworkModal: React.FC = ({ switchNetwork, chainId, t, onDismiss, supportedChains }) => { diff --git a/src/widgets/NetworkModal/useNetworkModal.tsx b/src/widgets/NetworkModal/useNetworkModal.tsx index 58c70ee9..49d3472a 100644 --- a/src/widgets/NetworkModal/useNetworkModal.tsx +++ b/src/widgets/NetworkModal/useNetworkModal.tsx @@ -2,7 +2,6 @@ import React from "react"; import { useModal } from "../Modal"; import { SwitchNetwork } from "./types"; import SelectNetworkModal from "./SelectNetworkModal"; -import { ChainId } from "./config"; interface ReturnType { onPresentNetworkModal: () => void; @@ -12,7 +11,7 @@ const useNetworkModal = ( switchNetwork: SwitchNetwork, chainId: number, t: (key: string) => string, - supportedChains?: ChainId[] + supportedChains?: number[] ): ReturnType => { const [onPresentNetworkModal] = useModal( , From e25ef4771123a82dde4fc2a330ee57e549c14602 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 15 Nov 2022 17:55:34 -0300 Subject: [PATCH 04/25] chore: Add settings Icon --- src/components/Svg/Icons/MenuSettings.tsx | 26 +++++++++++++++++++++++ src/components/Svg/Icons/index.ts | 1 + src/components/Svg/Svg.tsx | 4 ++++ src/components/Svg/types.ts | 1 + 4 files changed, 32 insertions(+) create mode 100644 src/components/Svg/Icons/MenuSettings.tsx diff --git a/src/components/Svg/Icons/MenuSettings.tsx b/src/components/Svg/Icons/MenuSettings.tsx new file mode 100644 index 00000000..9eeb8f50 --- /dev/null +++ b/src/components/Svg/Icons/MenuSettings.tsx @@ -0,0 +1,26 @@ +/** @jsxImportSource theme-ui */ +import React from "react"; +import { rotation, SvgProps } from "./types"; + +const Arrow: React.FC = ({ direction = "down", color = "text", width, getStyles }) => { + const deg: rotation = { + left: 90, + up: 180, + right: 270, + down: 0, + }; + const style = getStyles({ + degree: deg[direction as keyof rotation], + color, + }); + return ( + + + + ); +}; + +export default Arrow; diff --git a/src/components/Svg/Icons/index.ts b/src/components/Svg/Icons/index.ts index c122cc98..6fb7cb3a 100644 --- a/src/components/Svg/Icons/index.ts +++ b/src/components/Svg/Icons/index.ts @@ -45,3 +45,4 @@ export { default as ZapIcon } from "./ZapIcon"; export { default as Migrate } from "./Migrate"; export { default as Message } from "./Message"; export { default as Positions } from "./Positions"; +export { default as MenuSettings } from "./MenuSettings"; diff --git a/src/components/Svg/Svg.tsx b/src/components/Svg/Svg.tsx index b9dd74b8..a3706cb3 100644 --- a/src/components/Svg/Svg.tsx +++ b/src/components/Svg/Svg.tsx @@ -50,6 +50,7 @@ import { Migrate, Message, Positions, + MenuSettings, } from "./Icons"; import { BSC, BANANA, BNB, ETH, GNANA, POLYGON, TLOS } from "./tokens"; import { IconStyles } from "./Icons/types"; @@ -223,6 +224,9 @@ const Svg: React.FC = ({ icon, ...props }: any) => { if (icon === icons.POSITIONS) { return ; } + if (icon === icons.MENU_SETTINGS) { + return ; + } return null; }; diff --git a/src/components/Svg/types.ts b/src/components/Svg/types.ts index 954c40d6..f3eacf0f 100644 --- a/src/components/Svg/types.ts +++ b/src/components/Svg/types.ts @@ -59,6 +59,7 @@ export enum icons { MIGRATE = "Migrate", MESSAGE = "message", POSITIONS = "Positions", + MENU_SETTINGS = "MenuSettings", } export enum directions { From f84478a0f478b2ebad0170285343541cf3f7017b Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Wed, 16 Nov 2022 10:40:21 -0300 Subject: [PATCH 05/25] chore: Fix input's icon --- src/__tests__/components/input.test.tsx | 4 ++-- src/__tests__/widgets/menu.test.tsx | 4 ++-- src/components/Input/Input.tsx | 17 ++++++----------- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/__tests__/components/input.test.tsx b/src/__tests__/components/input.test.tsx index dbc4d95c..4df89a2d 100644 --- a/src/__tests__/components/input.test.tsx +++ b/src/__tests__/components/input.test.tsx @@ -9,10 +9,10 @@ it("renders correctly", () => { expect(asFragment()).toMatchInlineSnapshot(`
diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx index bd833799..fba237f0 100644 --- a/src/__tests__/widgets/menu.test.tsx +++ b/src/__tests__/widgets/menu.test.tsx @@ -642,10 +642,10 @@ it("renders correctly", () => { />
= ({ size = sizes.MD, icon, width, ...props }) => { return ( - + = ({ size = sizes.MD, icon, width, ...props }) {icon && ( )} - + ); }; From 07a2a47f8992b9913d8ecfe91fd3f123b2ad81bf Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 22 Nov 2022 12:42:20 -0300 Subject: [PATCH 06/25] chore: Remove span tag in Network modal --- src/__tests__/widgets/menu.test.tsx | 10 ++-------- src/widgets/Navbar/NetworkButton.tsx | 3 +-- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx index fba237f0..a05d2575 100644 --- a/src/__tests__/widgets/menu.test.tsx +++ b/src/__tests__/widgets/menu.test.tsx @@ -526,10 +526,7 @@ it("renders correctly", () => { /> - BNB @@ -881,10 +878,7 @@ it("renders correctly", () => { /> - BNB diff --git a/src/widgets/Navbar/NetworkButton.tsx b/src/widgets/Navbar/NetworkButton.tsx index 6a4a1241..68319d2e 100644 --- a/src/widgets/Navbar/NetworkButton.tsx +++ b/src/widgets/Navbar/NetworkButton.tsx @@ -27,8 +27,7 @@ const NetworkButton: React.FC = ({ chainId, switchNetwork, t, supportedCh }} > - - + {NETWORK_LABEL[chainId]} From 71e18872da4fc149275e6e3e3ee5778ed1ff3084 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Wed, 23 Nov 2022 13:08:04 -0300 Subject: [PATCH 07/25] chore: Close Button always visible for Modal Header --- src/widgets/Modal/ModalHeader.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/widgets/Modal/ModalHeader.tsx b/src/widgets/Modal/ModalHeader.tsx index 6a37a1d7..ed8f6ba9 100644 --- a/src/widgets/Modal/ModalHeader.tsx +++ b/src/widgets/Modal/ModalHeader.tsx @@ -8,11 +8,21 @@ import { Divider } from "../../components/Divider"; const ModalHeader: React.FC = ({ children, onDismiss, ...props }) => { return ( <> - - {children} - - - + {children && ( + <> + + {children} + + + + )} + ); }; From 949e4ac938e253bfcd6304c864ff4b51503c72cc Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Wed, 23 Nov 2022 14:56:14 -0300 Subject: [PATCH 08/25] Revert "chore: Close Button always visible for Modal Header" This reverts commit 71e18872da4fc149275e6e3e3ee5778ed1ff3084. --- src/widgets/Modal/ModalHeader.tsx | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/widgets/Modal/ModalHeader.tsx b/src/widgets/Modal/ModalHeader.tsx index ed8f6ba9..6a37a1d7 100644 --- a/src/widgets/Modal/ModalHeader.tsx +++ b/src/widgets/Modal/ModalHeader.tsx @@ -8,21 +8,11 @@ import { Divider } from "../../components/Divider"; const ModalHeader: React.FC = ({ children, onDismiss, ...props }) => { return ( <> - {children && ( - <> - - {children} - - - - )} - + + {children} + + + ); }; From 477706465c34188a3ac2c06e225abc7a592d5e0d Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Fri, 25 Nov 2022 16:53:44 -0300 Subject: [PATCH 09/25] chore: New Bills page icons --- src/components/Svg/_Icons/BillsM1.tsx | 32 ++++++++++++++++++++------- src/components/Svg/_Icons/BillsM2.tsx | 28 ++++++++++------------- src/components/Svg/_Icons/BillsM3.tsx | 19 +++++++++++----- src/widgets/Modal/ModalHeader.tsx | 2 +- 4 files changed, 50 insertions(+), 31 deletions(-) diff --git a/src/components/Svg/_Icons/BillsM1.tsx b/src/components/Svg/_Icons/BillsM1.tsx index 146e7353..d4f2c68d 100644 --- a/src/components/Svg/_Icons/BillsM1.tsx +++ b/src/components/Svg/_Icons/BillsM1.tsx @@ -4,16 +4,32 @@ import { LegacySvgProps } from "../types"; const BillsM1: React.FC = ({ color, bgColor, ...props }) => { return ( - - - - - + - - + + + + + + + + + ); }; diff --git a/src/components/Svg/_Icons/BillsM2.tsx b/src/components/Svg/_Icons/BillsM2.tsx index e0836ff4..6c454ba9 100644 --- a/src/components/Svg/_Icons/BillsM2.tsx +++ b/src/components/Svg/_Icons/BillsM2.tsx @@ -4,25 +4,21 @@ import { LegacySvgProps } from "../types"; const BillsM2: React.FC = ({ color, bgColor, ...props }) => { return ( - - - - - - - + + - - - - - ); }; diff --git a/src/components/Svg/_Icons/BillsM3.tsx b/src/components/Svg/_Icons/BillsM3.tsx index e67e16a4..48bfdae1 100644 --- a/src/components/Svg/_Icons/BillsM3.tsx +++ b/src/components/Svg/_Icons/BillsM3.tsx @@ -4,17 +4,24 @@ import { LegacySvgProps } from "../types"; const BillsM3: React.FC = ({ color, bgColor, ...props }) => { return ( - - - + + - ); diff --git a/src/widgets/Modal/ModalHeader.tsx b/src/widgets/Modal/ModalHeader.tsx index 6a37a1d7..2016d07a 100644 --- a/src/widgets/Modal/ModalHeader.tsx +++ b/src/widgets/Modal/ModalHeader.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from "react"; +import React from "react"; import { Flex } from "theme-ui"; import style from "./styles"; import { IconButton } from "../../components/Button"; From 5b0a238338e37ed81a31fd061cc4d1bb918b0e16 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Sat, 3 Dec 2022 09:58:09 -0300 Subject: [PATCH 10/25] chore: Fix select --- src/components/Select/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts index f96e2fb5..f40d365f 100644 --- a/src/components/Select/styles.ts +++ b/src/components/Select/styles.ts @@ -20,7 +20,7 @@ const styles: Record = { boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px", }, backdrop: { - width: "100vw", + width: "98vw", height: "100vh", position: "fixed", background: "transparent", From bded2f0a22abeda21ac06306a18553a03c4fd427 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Sat, 3 Dec 2022 11:22:49 -0300 Subject: [PATCH 11/25] chore: Lp type tag --- src/__tests__/widgets/menu.test.tsx | 100 +++++++++--------- src/components/Tag/LpTag.tsx | 31 ++++++ src/components/Tag/Tag.tsx | 2 +- src/components/Tag/index.stories.tsx | 5 + .../Tag/{StyledTag.tsx => styles.tsx} | 20 +++- 5 files changed, 106 insertions(+), 52 deletions(-) create mode 100644 src/components/Tag/LpTag.tsx rename src/components/Tag/{StyledTag.tsx => styles.tsx} (62%) diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx index a05d2575..f1482ec1 100644 --- a/src/__tests__/widgets/menu.test.tsx +++ b/src/__tests__/widgets/menu.test.tsx @@ -52,10 +52,10 @@ it("renders correctly", () => { expect(asFragment()).toMatchInlineSnapshot(`
{ target="_self" >
Exchange
Stake
@@ -249,21 +249,21 @@ it("renders correctly", () => {
Raise
@@ -281,21 +281,21 @@ it("renders correctly", () => {
Collect
@@ -313,11 +313,11 @@ it("renders correctly", () => {
{ target="_blank" >
Lend
Explore
@@ -360,7 +360,7 @@ it("renders correctly", () => {
{ style="display: flex; align-items: center; justify-content: space-evenly; width: 200px;" > { { {
body
@@ -672,13 +672,13 @@ it("renders correctly", () => {
{ class="css-1rzh7ej" />
{ { { { { {
= ({ variant, ...props }) => { + const bgColor = { + ape: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.2) 15.88%, rgba(225, 178, 66, 0.2) 92.56%)", + uni: "rgba(213, 49, 113, 0.15)", + }; + const textColor = { + ape: "linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)", + uni: "#D53171", + }; + + return ( + + {variant} LP + + ); +}; + +export default LpTag; diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 8b775cb8..b2d209a0 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -1,6 +1,6 @@ import React from "react"; import { TagProps } from "./types"; -import { StyledTag } from "./StyledTag"; +import { StyledTag } from "./styles"; const Tag: React.FC = ({ startIcon, endIcon, children, ...props }) => ( diff --git a/src/components/Tag/index.stories.tsx b/src/components/Tag/index.stories.tsx index f498551d..6cffbf7b 100644 --- a/src/components/Tag/index.stories.tsx +++ b/src/components/Tag/index.stories.tsx @@ -5,6 +5,7 @@ import { Meta } from "@storybook/react/types-6-0"; import { CommunityIcon, RemoveIcon } from "../Svg"; import Tag from "./Tag"; import { variants } from "./types"; +import LpTag, { LpTypeVariants } from "./LpTag"; const Row = styled.div` display: flex; @@ -37,6 +38,10 @@ export const Default: React.FC = () => { ))} + + + + ); }; diff --git a/src/components/Tag/StyledTag.tsx b/src/components/Tag/styles.tsx similarity index 62% rename from src/components/Tag/StyledTag.tsx rename to src/components/Tag/styles.tsx index f765b621..5692abdc 100644 --- a/src/components/Tag/StyledTag.tsx +++ b/src/components/Tag/styles.tsx @@ -29,4 +29,22 @@ export const StyledTag = styled.div` } `; -export default null; +export const StyledLpTag = styled.div<{ background: string }>` + align-items: center; + background: ${({ background }) => background}; + border-radius: 6px; + display: inline-flex; + height: 15px; + padding: 0 5px; +`; + +export const StyledLpText = styled.div<{ background?: string }>` + background: ${({ background }) => background}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + opacity: 0.8; + text-transform: uppercase; + font-size: 10px; + font-weight: 500; + line-height: 15px; +`; From 63e17d5176f5e098df932e22fbf706f6564460d6 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Mon, 5 Dec 2022 10:04:16 -0300 Subject: [PATCH 12/25] chore: Added LpTag export --- src/components/Tag/LpTag.tsx | 1 - src/components/Tag/index.tsx | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tag/LpTag.tsx b/src/components/Tag/LpTag.tsx index b9bcfab5..c16d67a1 100644 --- a/src/components/Tag/LpTag.tsx +++ b/src/components/Tag/LpTag.tsx @@ -1,5 +1,4 @@ import React from "react"; -import styled from "styled-components"; import { StyledLpTag, StyledLpText } from "./styles"; export enum LpTypeVariants { diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx index 2e0eabc7..4f295626 100644 --- a/src/components/Tag/index.tsx +++ b/src/components/Tag/index.tsx @@ -1,2 +1,3 @@ export { default as Tag } from "./Tag"; +export { default as LpTag } from "./LpTag"; export type { TagProps, Variants as TagVariants } from "./types"; From 6ae0473b2289ac6cbdc87431348cdae93b5bf97a Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Mon, 5 Dec 2022 10:32:52 -0300 Subject: [PATCH 13/25] chore: Increase opacity --- src/components/Tag/LpTag.tsx | 6 +----- src/components/Tag/styles.tsx | 2 +- src/components/Tag/types.ts | 5 +++++ 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/Tag/LpTag.tsx b/src/components/Tag/LpTag.tsx index c16d67a1..aa32c635 100644 --- a/src/components/Tag/LpTag.tsx +++ b/src/components/Tag/LpTag.tsx @@ -1,10 +1,6 @@ import React from "react"; import { StyledLpTag, StyledLpText } from "./styles"; - -export enum LpTypeVariants { - APE = "ape", - UNI = "uni", -} +import { LpTypeVariants } from "./types"; export interface LpTagProps { variant: LpTypeVariants; diff --git a/src/components/Tag/styles.tsx b/src/components/Tag/styles.tsx index 5692abdc..3a62947b 100644 --- a/src/components/Tag/styles.tsx +++ b/src/components/Tag/styles.tsx @@ -42,7 +42,7 @@ export const StyledLpText = styled.div<{ background?: string }>` background: ${({ background }) => background}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; - opacity: 0.8; + opacity: 1; text-transform: uppercase; font-size: 10px; font-weight: 500; diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts index d6646713..0d23f23d 100644 --- a/src/components/Tag/types.ts +++ b/src/components/Tag/types.ts @@ -19,3 +19,8 @@ export interface TagProps extends SpaceProps { endIcon?: ReactNode; outline?: boolean; } + +export enum LpTypeVariants { + APE = "ape", + UNI = "uni", +} From 8a6c55fe75675ea28b5a62f358b9e74d4d8e567c Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Mon, 5 Dec 2022 17:25:28 -0300 Subject: [PATCH 14/25] chore: Added lptype tag for dark mode --- src/__tests__/widgets/menu.test.tsx | 100 +++++++++++++-------------- src/components/Tag/LpTag.tsx | 21 ++++-- src/components/Tag/index.stories.tsx | 4 +- src/components/Tag/styles.tsx | 17 +++-- 4 files changed, 79 insertions(+), 63 deletions(-) diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx index f1482ec1..d709d8bb 100644 --- a/src/__tests__/widgets/menu.test.tsx +++ b/src/__tests__/widgets/menu.test.tsx @@ -52,10 +52,10 @@ it("renders correctly", () => { expect(asFragment()).toMatchInlineSnapshot(`
{ target="_self" >
Exchange
Stake
@@ -249,21 +249,21 @@ it("renders correctly", () => {
Raise
@@ -281,21 +281,21 @@ it("renders correctly", () => {
Collect
@@ -313,11 +313,11 @@ it("renders correctly", () => {
{ target="_blank" >
Lend
Explore
@@ -360,7 +360,7 @@ it("renders correctly", () => {
{ style="display: flex; align-items: center; justify-content: space-evenly; width: 200px;" > { { {
body
@@ -672,13 +672,13 @@ it("renders correctly", () => {
{ class="css-1rzh7ej" />
{ { { { { {
= ({ variant, ...props }) => { + const { isDark } = useTheme(); const bgColor = { - ape: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.2) 15.88%, rgba(225, 178, 66, 0.2) 92.56%)", - uni: "rgba(213, 49, 113, 0.15)", + ape: { + light: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.2) 15.88%, rgba(225, 178, 66, 0.2) 92.56%)", + dark: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.5) 15.88%, rgba(225, 178, 66, 0.5) 92.56%)", + }, + uni: { light: "rgba(213, 49, 113, 0.15)", dark: "rgba(213, 49, 113, 0.15)" }, }; const textColor = { - ape: "linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)", - uni: "#D53171", + ape: { light: "linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)", dark: "rgba(255, 255, 255, 0.5)" }, + uni: { light: "#D53171", dark: "#D53171" }, }; return ( - {variant} LP + {isDark ? ( + {variant} LP + ) : ( + {variant} LP + )} ); }; diff --git a/src/components/Tag/index.stories.tsx b/src/components/Tag/index.stories.tsx index 6cffbf7b..eaf80bad 100644 --- a/src/components/Tag/index.stories.tsx +++ b/src/components/Tag/index.stories.tsx @@ -4,8 +4,8 @@ import styled from "styled-components"; import { Meta } from "@storybook/react/types-6-0"; import { CommunityIcon, RemoveIcon } from "../Svg"; import Tag from "./Tag"; -import { variants } from "./types"; -import LpTag, { LpTypeVariants } from "./LpTag"; +import { LpTypeVariants, variants } from "./types"; +import LpTag from "./LpTag"; const Row = styled.div` display: flex; diff --git a/src/components/Tag/styles.tsx b/src/components/Tag/styles.tsx index 3a62947b..3344775a 100644 --- a/src/components/Tag/styles.tsx +++ b/src/components/Tag/styles.tsx @@ -29,20 +29,27 @@ export const StyledTag = styled.div` } `; -export const StyledLpTag = styled.div<{ background: string }>` +export const StyledLpTag = styled.div<{ background: { light: string; dark: string } }>` align-items: center; - background: ${({ background }) => background}; + background: ${({ background, theme }) => (theme.isDark ? background.dark : background.light)}; border-radius: 6px; display: inline-flex; height: 15px; padding: 0 5px; `; -export const StyledLpText = styled.div<{ background?: string }>` - background: ${({ background }) => background}; +export const LightText = styled.div<{ background: { light: string; dark: string } }>` + background: ${({ background }) => background?.light}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; - opacity: 1; + text-transform: uppercase; + font-size: 10px; + font-weight: 500; + line-height: 15px; +`; + +export const DarkText = styled.div<{ background: { light: string; dark: string } }>` + color: ${({ background }) => background?.dark}; text-transform: uppercase; font-size: 10px; font-weight: 500; From 473241aa8f24ee5c25c79dc4c4f5e998db78a5de Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 6 Dec 2022 16:57:41 -0300 Subject: [PATCH 15/25] chore: Moved colors to theme folder --- src/components/Tag/LpTag.tsx | 17 +++-------------- src/components/Tag/styles.tsx | 14 +++++++------- src/theme/colors.ts | 16 ++++++++++++++++ src/theme/types.ts | 7 +++++++ 4 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/components/Tag/LpTag.tsx b/src/components/Tag/LpTag.tsx index 647d1ff5..d5f485aa 100644 --- a/src/components/Tag/LpTag.tsx +++ b/src/components/Tag/LpTag.tsx @@ -9,24 +9,13 @@ export interface LpTagProps { const LpTag: React.FC = ({ variant, ...props }) => { const { isDark } = useTheme(); - const bgColor = { - ape: { - light: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.2) 15.88%, rgba(225, 178, 66, 0.2) 92.56%)", - dark: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.5) 15.88%, rgba(225, 178, 66, 0.5) 92.56%)", - }, - uni: { light: "rgba(213, 49, 113, 0.15)", dark: "rgba(213, 49, 113, 0.15)" }, - }; - const textColor = { - ape: { light: "linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)", dark: "rgba(255, 255, 255, 0.5)" }, - uni: { light: "#D53171", dark: "#D53171" }, - }; return ( - + {isDark ? ( - {variant} LP + {variant} LP ) : ( - {variant} LP + {variant} LP )} ); diff --git a/src/components/Tag/styles.tsx b/src/components/Tag/styles.tsx index 3344775a..05b9bcb3 100644 --- a/src/components/Tag/styles.tsx +++ b/src/components/Tag/styles.tsx @@ -1,6 +1,6 @@ import styled, { DefaultTheme } from "styled-components"; import getColor from "../../util/getColor"; -import { TagProps } from "./types"; +import { LpTypeVariants, TagProps } from "./types"; interface ThemedProps extends TagProps { theme: DefaultTheme; @@ -29,17 +29,17 @@ export const StyledTag = styled.div` } `; -export const StyledLpTag = styled.div<{ background: { light: string; dark: string } }>` +export const StyledLpTag = styled.div<{ variant: LpTypeVariants }>` align-items: center; - background: ${({ background, theme }) => (theme.isDark ? background.dark : background.light)}; + background: ${({ theme, variant }) => theme?.colors?.lpTagBg[variant]}; border-radius: 6px; display: inline-flex; height: 15px; padding: 0 5px; `; -export const LightText = styled.div<{ background: { light: string; dark: string } }>` - background: ${({ background }) => background?.light}; +export const LightText = styled.div<{ variant: LpTypeVariants }>` + background: ${({ theme, variant }) => theme?.colors?.lpTagText[variant]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; @@ -48,8 +48,8 @@ export const LightText = styled.div<{ background: { light: string; dark: string line-height: 15px; `; -export const DarkText = styled.div<{ background: { light: string; dark: string } }>` - color: ${({ background }) => background?.dark}; +export const DarkText = styled.div<{ variant: LpTypeVariants }>` + color: ${({ theme, variant }) => theme?.colors?.lpTagText[variant]}; text-transform: uppercase; font-size: 10px; font-weight: 500; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 372a5072..45a5f6af 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -31,6 +31,14 @@ export const lightColors: Colors = { newGradient: "linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)", bubblegum: "linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)", }, + lpTagBg: { + ape: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.2) 15.88%, rgba(225, 178, 66, 0.2) 92.56%)", + uni: "rgba(213, 49, 113, 0.15)", + }, + lpTagText: { + ape: "linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)", + uni: "#D53171", + }, primaryButtonDisable: "rgba(66, 66, 66, 0.5)", secondaryButtonDisableBg: "#F1EADA", secondaryButtonDisableColor: "rgba(66, 66, 66, 0.5)", @@ -52,6 +60,14 @@ export const darkColors: Colors = { gradients: { bubblegum: "linear-gradient(139.73deg, #313D5C 0%, #3D2A54 100%)", }, + lpTagBg: { + ape: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.5) 15.88%, rgba(225, 178, 66, 0.5) 92.56%)", + uni: "rgba(213, 49, 113, 0.15)", + }, + lpTagText: { + ape: "rgba(255, 255, 255, 0.5)", + uni: "#D53171", + }, primaryButtonDisable: "rgba(241, 234, 218, 0.5)", secondaryButtonDisableBg: "rgba(33, 33, 33, 0.5)", secondaryButtonDisableColor: "#F1EADA", diff --git a/src/theme/types.ts b/src/theme/types.ts index bb9d6aed..cc6820f8 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -61,6 +61,8 @@ export type Colors = { smartGradient: string; yellowHover: string; input: string; + lpTagBg: LpTagColors; + lpTagText: LpTagColors; // Gradients gradients?: Gradients; @@ -77,3 +79,8 @@ export type ZIndices = { export type FontFamily = { poppins: string; }; + +export type LpTagColors = { + ape: string; + uni: string; +}; From 05e50aee313a16674fe922eee02c63044fc5feee Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 6 Dec 2022 18:10:18 -0300 Subject: [PATCH 16/25] chore: Export Lp type --- src/components/Tag/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx index 4f295626..df3c1337 100644 --- a/src/components/Tag/index.tsx +++ b/src/components/Tag/index.tsx @@ -1,3 +1,4 @@ export { default as Tag } from "./Tag"; export { default as LpTag } from "./LpTag"; export type { TagProps, Variants as TagVariants } from "./types"; +export type { LpTypeVariants } from "./types"; From 7b6677deb05ac876eff14357ed1f4e299c47eda8 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 6 Dec 2022 18:25:23 -0300 Subject: [PATCH 17/25] chore: Fix export type --- src/components/Tag/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx index df3c1337..aba1099e 100644 --- a/src/components/Tag/index.tsx +++ b/src/components/Tag/index.tsx @@ -1,4 +1,4 @@ export { default as Tag } from "./Tag"; export { default as LpTag } from "./LpTag"; export type { TagProps, Variants as TagVariants } from "./types"; -export type { LpTypeVariants } from "./types"; +export { LpTypeVariants } from "./types"; From 6e59fa957766518a56a640c4df838beaf80e6761 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 6 Dec 2022 18:51:38 -0300 Subject: [PATCH 18/25] chore: Temp fix --- src/components/Tag/LpTag.tsx | 4 ++-- src/components/Tag/types.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Tag/LpTag.tsx b/src/components/Tag/LpTag.tsx index d5f485aa..501df17f 100644 --- a/src/components/Tag/LpTag.tsx +++ b/src/components/Tag/LpTag.tsx @@ -4,10 +4,10 @@ import { StyledLpTag, LightText, DarkText } from "./styles"; import { LpTypeVariants } from "./types"; export interface LpTagProps { - variant: LpTypeVariants; + variant?: LpTypeVariants; } -const LpTag: React.FC = ({ variant, ...props }) => { +const LpTag: React.FC = ({ variant = LpTypeVariants.APE, ...props }) => { const { isDark } = useTheme(); return ( diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts index 0d23f23d..1d514309 100644 --- a/src/components/Tag/types.ts +++ b/src/components/Tag/types.ts @@ -20,7 +20,8 @@ export interface TagProps extends SpaceProps { outline?: boolean; } -export enum LpTypeVariants { +export enum LpTypes { APE = "ape", UNI = "uni", } +export type LpTypeVariants = typeof LpTypes[keyof typeof LpTypes]; From 0f28e5000626ff6a879839bfa5b64db2303a7eea Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Tue, 6 Dec 2022 18:52:31 -0300 Subject: [PATCH 19/25] chore: Temp fix --- src/components/Tag/types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts index 1d514309..0d23f23d 100644 --- a/src/components/Tag/types.ts +++ b/src/components/Tag/types.ts @@ -20,8 +20,7 @@ export interface TagProps extends SpaceProps { outline?: boolean; } -export enum LpTypes { +export enum LpTypeVariants { APE = "ape", UNI = "uni", } -export type LpTypeVariants = typeof LpTypes[keyof typeof LpTypes]; From c66c63e33aa3cf976999114f8c71d71d8ad072ed Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Wed, 7 Dec 2022 14:21:48 -0300 Subject: [PATCH 20/25] chore: Fixed LpTag --- src/components/Tag/LpTag.tsx | 8 ++------ src/components/Tag/index.stories.tsx | 6 +++--- src/components/Tag/index.tsx | 2 +- src/components/Tag/styles.tsx | 18 +++++++++++------- src/components/Tag/types.ts | 12 +++++++++--- 5 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/components/Tag/LpTag.tsx b/src/components/Tag/LpTag.tsx index 501df17f..686289cf 100644 --- a/src/components/Tag/LpTag.tsx +++ b/src/components/Tag/LpTag.tsx @@ -1,13 +1,9 @@ import React from "react"; import { useTheme } from "styled-components"; import { StyledLpTag, LightText, DarkText } from "./styles"; -import { LpTypeVariants } from "./types"; +import { LpTagProps } from "./types"; -export interface LpTagProps { - variant?: LpTypeVariants; -} - -const LpTag: React.FC = ({ variant = LpTypeVariants.APE, ...props }) => { +const LpTag: React.FC = ({ variant, ...props }) => { const { isDark } = useTheme(); return ( diff --git a/src/components/Tag/index.stories.tsx b/src/components/Tag/index.stories.tsx index eaf80bad..cebbd46f 100644 --- a/src/components/Tag/index.stories.tsx +++ b/src/components/Tag/index.stories.tsx @@ -4,7 +4,7 @@ import styled from "styled-components"; import { Meta } from "@storybook/react/types-6-0"; import { CommunityIcon, RemoveIcon } from "../Svg"; import Tag from "./Tag"; -import { LpTypeVariants, variants } from "./types"; +import { variants } from "./types"; import LpTag from "./LpTag"; const Row = styled.div` @@ -39,8 +39,8 @@ export const Default: React.FC = () => { ))} - - + + ); diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx index aba1099e..18f557e8 100644 --- a/src/components/Tag/index.tsx +++ b/src/components/Tag/index.tsx @@ -1,4 +1,4 @@ export { default as Tag } from "./Tag"; export { default as LpTag } from "./LpTag"; export type { TagProps, Variants as TagVariants } from "./types"; -export { LpTypeVariants } from "./types"; +export type { LpTagVariants } from "./types"; diff --git a/src/components/Tag/styles.tsx b/src/components/Tag/styles.tsx index 05b9bcb3..d6a5dfd9 100644 --- a/src/components/Tag/styles.tsx +++ b/src/components/Tag/styles.tsx @@ -1,6 +1,6 @@ import styled, { DefaultTheme } from "styled-components"; import getColor from "../../util/getColor"; -import { LpTypeVariants, TagProps } from "./types"; +import { LpTagProps, TagProps } from "./types"; interface ThemedProps extends TagProps { theme: DefaultTheme; @@ -29,17 +29,21 @@ export const StyledTag = styled.div` } `; -export const StyledLpTag = styled.div<{ variant: LpTypeVariants }>` +interface CustomProps extends LpTagProps { + theme: DefaultTheme; +} + +export const StyledLpTag = styled.div` align-items: center; - background: ${({ theme, variant }) => theme?.colors?.lpTagBg[variant]}; + background: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagBg?.[variant]}; border-radius: 6px; display: inline-flex; height: 15px; padding: 0 5px; `; -export const LightText = styled.div<{ variant: LpTypeVariants }>` - background: ${({ theme, variant }) => theme?.colors?.lpTagText[variant]}; +export const LightText = styled.div` + background: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagText?.[variant]}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; @@ -48,8 +52,8 @@ export const LightText = styled.div<{ variant: LpTypeVariants }>` line-height: 15px; `; -export const DarkText = styled.div<{ variant: LpTypeVariants }>` - color: ${({ theme, variant }) => theme?.colors?.lpTagText[variant]}; +export const DarkText = styled.div` + color: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagText?.[variant]}; text-transform: uppercase; font-size: 10px; font-weight: 500; diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts index 0d23f23d..6c48ab5f 100644 --- a/src/components/Tag/types.ts +++ b/src/components/Tag/types.ts @@ -20,7 +20,13 @@ export interface TagProps extends SpaceProps { outline?: boolean; } -export enum LpTypeVariants { - APE = "ape", - UNI = "uni", +export const lpTagVariants = { + APE: "ape", + UNI: "uni", +} as const; + +export type LpTagVariants = typeof lpTagVariants[keyof typeof lpTagVariants]; + +export interface LpTagProps extends SpaceProps { + variant?: LpTagVariants; } From b3af036f57eec06e446e18fd33771f2ffa53d1bd Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Fri, 9 Dec 2022 11:59:26 -0300 Subject: [PATCH 21/25] chore: New Lp Tag colors --- src/components/Tag/types.ts | 2 +- src/theme/colors.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts index 6c48ab5f..1a8e6f6b 100644 --- a/src/components/Tag/types.ts +++ b/src/components/Tag/types.ts @@ -28,5 +28,5 @@ export const lpTagVariants = { export type LpTagVariants = typeof lpTagVariants[keyof typeof lpTagVariants]; export interface LpTagProps extends SpaceProps { - variant?: LpTagVariants; + variant: LpTagVariants; } diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 45a5f6af..5da78656 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -32,7 +32,7 @@ export const lightColors: Colors = { bubblegum: "linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)", }, lpTagBg: { - ape: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.2) 15.88%, rgba(225, 178, 66, 0.2) 92.56%)", + ape: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.35) 15.88%, rgba(225, 178, 66, 0.35) 92.56%)", uni: "rgba(213, 49, 113, 0.15)", }, lpTagText: { @@ -65,7 +65,7 @@ export const darkColors: Colors = { uni: "rgba(213, 49, 113, 0.15)", }, lpTagText: { - ape: "rgba(255, 255, 255, 0.5)", + ape: "rgba(255, 255, 255, 0.75)", uni: "#D53171", }, primaryButtonDisable: "rgba(241, 234, 218, 0.5)", From f44faf78243d4916f7f72ae5d6988a32439b348e Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Wed, 14 Dec 2022 15:20:03 -0300 Subject: [PATCH 22/25] chore: Add new lptype tag --- src/components/Tag/LpTag.tsx | 11 ++--------- src/components/Tag/styles.tsx | 16 +++------------- src/theme/colors.ts | 16 ++++------------ src/theme/types.ts | 1 - 4 files changed, 9 insertions(+), 35 deletions(-) diff --git a/src/components/Tag/LpTag.tsx b/src/components/Tag/LpTag.tsx index 686289cf..364ef6f0 100644 --- a/src/components/Tag/LpTag.tsx +++ b/src/components/Tag/LpTag.tsx @@ -1,18 +1,11 @@ import React from "react"; -import { useTheme } from "styled-components"; -import { StyledLpTag, LightText, DarkText } from "./styles"; +import { StyledLpTag, StyledLPText } from "./styles"; import { LpTagProps } from "./types"; const LpTag: React.FC = ({ variant, ...props }) => { - const { isDark } = useTheme(); - return ( - {isDark ? ( - {variant} LP - ) : ( - {variant} LP - )} + {variant} LP ); }; diff --git a/src/components/Tag/styles.tsx b/src/components/Tag/styles.tsx index d6a5dfd9..f615ff90 100644 --- a/src/components/Tag/styles.tsx +++ b/src/components/Tag/styles.tsx @@ -42,20 +42,10 @@ export const StyledLpTag = styled.div` padding: 0 5px; `; -export const LightText = styled.div` - background: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagText?.[variant]}; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; +export const StyledLPText = styled.div<{ theme: DefaultTheme }>` + color: ${({ theme }) => theme?.colors?.primaryBright}; text-transform: uppercase; font-size: 10px; - font-weight: 500; - line-height: 15px; -`; - -export const DarkText = styled.div` - color: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagText?.[variant]}; - text-transform: uppercase; - font-size: 10px; - font-weight: 500; + font-weight: 600; line-height: 15px; `; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 5da78656..7a9f7536 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -32,12 +32,8 @@ export const lightColors: Colors = { bubblegum: "linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)", }, lpTagBg: { - ape: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.35) 15.88%, rgba(225, 178, 66, 0.35) 92.56%)", - uni: "rgba(213, 49, 113, 0.15)", - }, - lpTagText: { - ape: "linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)", - uni: "#D53171", + ape: "linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)", + uni: "rgba(213, 49, 113, 0.8)", }, primaryButtonDisable: "rgba(66, 66, 66, 0.5)", secondaryButtonDisableBg: "#F1EADA", @@ -61,12 +57,8 @@ export const darkColors: Colors = { bubblegum: "linear-gradient(139.73deg, #313D5C 0%, #3D2A54 100%)", }, lpTagBg: { - ape: "linear-gradient(53.53deg, rgba(161, 101, 82, 0.5) 15.88%, rgba(225, 178, 66, 0.5) 92.56%)", - uni: "rgba(213, 49, 113, 0.15)", - }, - lpTagText: { - ape: "rgba(255, 255, 255, 0.75)", - uni: "#D53171", + ape: "linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)", + uni: "rgba(213, 49, 113, 0.8)", }, primaryButtonDisable: "rgba(241, 234, 218, 0.5)", secondaryButtonDisableBg: "rgba(33, 33, 33, 0.5)", diff --git a/src/theme/types.ts b/src/theme/types.ts index cc6820f8..70fe3209 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -62,7 +62,6 @@ export type Colors = { yellowHover: string; input: string; lpTagBg: LpTagColors; - lpTagText: LpTagColors; // Gradients gradients?: Gradients; From 4ed029735e75c0bd5c86670420dea7a6f6feebe0 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Wed, 14 Dec 2022 15:26:28 -0300 Subject: [PATCH 23/25] chore: Add test file --- src/__tests__/widgets/menu.test.tsx | 100 ++++++++++++++-------------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx index bdcd3fbe..bdc17024 100644 --- a/src/__tests__/widgets/menu.test.tsx +++ b/src/__tests__/widgets/menu.test.tsx @@ -52,10 +52,10 @@ it("renders correctly", () => { expect(asFragment()).toMatchInlineSnapshot(`
{ target="_self" >
Exchange
Stake
@@ -249,21 +249,21 @@ it("renders correctly", () => {
Raise
@@ -281,21 +281,21 @@ it("renders correctly", () => {
Collect
@@ -313,11 +313,11 @@ it("renders correctly", () => {
{ target="_blank" >
Lend
Explore
@@ -360,7 +360,7 @@ it("renders correctly", () => {
{ style="display: flex; align-items: center; justify-content: space-evenly; width: 200px;" > { { {
body
@@ -672,13 +672,13 @@ it("renders correctly", () => {
{ class="css-1rzh7ej" />
{ { { { { {
Date: Wed, 14 Dec 2022 18:41:08 -0300 Subject: [PATCH 24/25] chore: Add ARK lp type --- src/components/Tag/index.stories.tsx | 1 + src/components/Tag/types.ts | 1 + src/theme/colors.ts | 2 ++ src/theme/types.ts | 1 + 4 files changed, 5 insertions(+) diff --git a/src/components/Tag/index.stories.tsx b/src/components/Tag/index.stories.tsx index cebbd46f..bf891a46 100644 --- a/src/components/Tag/index.stories.tsx +++ b/src/components/Tag/index.stories.tsx @@ -41,6 +41,7 @@ export const Default: React.FC = () => { + ); diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts index 1a8e6f6b..ca580070 100644 --- a/src/components/Tag/types.ts +++ b/src/components/Tag/types.ts @@ -23,6 +23,7 @@ export interface TagProps extends SpaceProps { export const lpTagVariants = { APE: "ape", UNI: "uni", + ARK: "ark", } as const; export type LpTagVariants = typeof lpTagVariants[keyof typeof lpTagVariants]; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 7a9f7536..af4b6e62 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -34,6 +34,7 @@ export const lightColors: Colors = { lpTagBg: { ape: "linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)", uni: "rgba(213, 49, 113, 0.8)", + ark: "rgba(208, 126, 90, 0.8)", }, primaryButtonDisable: "rgba(66, 66, 66, 0.5)", secondaryButtonDisableBg: "#F1EADA", @@ -59,6 +60,7 @@ export const darkColors: Colors = { lpTagBg: { ape: "linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)", uni: "rgba(213, 49, 113, 0.8)", + ark: "rgba(208, 126, 90, 0.8)", }, primaryButtonDisable: "rgba(241, 234, 218, 0.5)", secondaryButtonDisableBg: "rgba(33, 33, 33, 0.5)", diff --git a/src/theme/types.ts b/src/theme/types.ts index 70fe3209..366eba83 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -82,4 +82,5 @@ export type FontFamily = { export type LpTagColors = { ape: string; uni: string; + ark: string; }; From f7e148d1031ddf888a10bfc86faad337946947f7 Mon Sep 17 00:00:00 2001 From: Ape Fede Date: Thu, 15 Dec 2022 10:02:38 -0300 Subject: [PATCH 25/25] chore: Moved Lptag colors to base colors --- src/theme/colors.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/theme/colors.ts b/src/theme/colors.ts index af4b6e62..f380604d 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -13,6 +13,11 @@ export const baseColors = { inputBorder: "#E6DECB", brown: "#A16552", smartGradient: "linear-gradient(94.44deg, #BA801E -9.73%, #E7CF67 40.14%, #BA801E 93.01%)", + lpTagBg: { + ape: "linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)", + uni: "rgba(213, 49, 113, 0.8)", + ark: "rgba(208, 126, 90, 0.8)", + }, }; export const brandColors = { @@ -31,11 +36,6 @@ export const lightColors: Colors = { newGradient: "linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)", bubblegum: "linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)", }, - lpTagBg: { - ape: "linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)", - uni: "rgba(213, 49, 113, 0.8)", - ark: "rgba(208, 126, 90, 0.8)", - }, primaryButtonDisable: "rgba(66, 66, 66, 0.5)", secondaryButtonDisableBg: "#F1EADA", secondaryButtonDisableColor: "rgba(66, 66, 66, 0.5)", @@ -57,11 +57,6 @@ export const darkColors: Colors = { gradients: { bubblegum: "linear-gradient(139.73deg, #313D5C 0%, #3D2A54 100%)", }, - lpTagBg: { - ape: "linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)", - uni: "rgba(213, 49, 113, 0.8)", - ark: "rgba(208, 126, 90, 0.8)", - }, primaryButtonDisable: "rgba(241, 234, 218, 0.5)", secondaryButtonDisableBg: "rgba(33, 33, 33, 0.5)", secondaryButtonDisableColor: "#F1EADA",