Skip to content

Commit

Permalink
chore: Lp type tag
Browse files Browse the repository at this point in the history
  • Loading branch information
@ape-fede
ape-fede committed Dec 3, 2022
1 parent 5b0a238 commit bded2f0
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 52 deletions.
100 changes: 50 additions & 50 deletions src/__tests__/widgets/menu.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@ it("renders correctly", () => {
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<div
class="sc-gWHigU cBzOAZ"
class="sc-citxvW iRpojR"
>
<nav
class="sc-citxvW cTERtb"
class="sc-bZSRNg fYLsjM"
>
<div
class="css-4cffwv"
Expand Down Expand Up @@ -200,38 +200,38 @@ it("renders correctly", () => {
</div>
</nav>
<div
class="sc-jcVcSv lmhZxW"
class="sc-iUuxjF jtvsWi"
>
<div
class="sc-iktFfs hiXoex"
class="sc-hiSbEG jRExDC"
>
<div
class="sc-lmoMya nmRpK"
class="sc-giImIA hxJRXv"
role="button"
>
<a
href="/swap"
target="_self"
>
<div
class="sc-cxFLGX fnkOhF"
class="sc-iJuVqt iTOioi"
>
Exchange
</div>
</a>
</div>
<div
class="sc-giImIA jyOARO"
class="sc-bYEvvW jlsOQN"
>
<div
class="sc-lmoMya nmRpK"
class="sc-giImIA hxJRXv"
role="button"
>
<div
class="sc-bYEvvW knmAaE"
class="sc-iktFfs cDLrHU"
>
<div
class="sc-cxFLGX fnkOhF"
class="sc-iJuVqt iTOioi"
>
Stake
</div>
Expand All @@ -249,21 +249,21 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-ezredP dAVyMm"
class="sc-kLgnNl btEQLW"
/>
</div>
<div
class="sc-giImIA jyOARO"
class="sc-bYEvvW jlsOQN"
>
<div
class="sc-lmoMya nmRpK"
class="sc-giImIA hxJRXv"
role="button"
>
<div
class="sc-bYEvvW knmAaE"
class="sc-iktFfs cDLrHU"
>
<div
class="sc-cxFLGX fnkOhF"
class="sc-iJuVqt iTOioi"
>
Raise
</div>
Expand All @@ -281,21 +281,21 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-ezredP dAVyMm"
class="sc-kLgnNl btEQLW"
/>
</div>
<div
class="sc-giImIA jyOARO"
class="sc-bYEvvW jlsOQN"
>
<div
class="sc-lmoMya nmRpK"
class="sc-giImIA hxJRXv"
role="button"
>
<div
class="sc-bYEvvW knmAaE"
class="sc-iktFfs cDLrHU"
>
<div
class="sc-cxFLGX fnkOhF"
class="sc-iJuVqt iTOioi"
>
Collect
</div>
Expand All @@ -313,36 +313,36 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-ezredP dAVyMm"
class="sc-kLgnNl btEQLW"
/>
</div>
<div
class="sc-lmoMya nmRpK"
class="sc-giImIA hxJRXv"
role="button"
>
<a
href="https://app.ola.finance/apeswap/markets"
target="_blank"
>
<div
class="sc-cxFLGX fnkOhF"
class="sc-iJuVqt iTOioi"
>
Lend
</div>
</a>
</div>
<div
class="sc-giImIA jyOARO"
class="sc-bYEvvW jlsOQN"
>
<div
class="sc-lmoMya nmRpK"
class="sc-giImIA hxJRXv"
role="button"
>
<div
class="sc-bYEvvW knmAaE"
class="sc-iktFfs cDLrHU"
>
<div
class="sc-cxFLGX fnkOhF"
class="sc-iJuVqt iTOioi"
>
Explore
</div>
Expand All @@ -360,7 +360,7 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-ezredP dAVyMm"
class="sc-kLgnNl btEQLW"
/>
</div>
<div
Expand All @@ -373,7 +373,7 @@ it("renders correctly", () => {
style="display: flex; align-items: center; justify-content: space-evenly; width: 200px;"
>
<a
class="sc-kLgnNl iobZJR"
class="sc-jJEKmz dMlzxM"
href="https://twitter.com/ape_swap"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -399,7 +399,7 @@ it("renders correctly", () => {
</svg>
</a>
<a
class="sc-kLgnNl iobZJR"
class="sc-jJEKmz dMlzxM"
href="https://t.me/ape_swap"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -425,7 +425,7 @@ it("renders correctly", () => {
</svg>
</a>
<a
class="sc-kLgnNl iobZJR"
class="sc-jJEKmz dMlzxM"
href="https://discord.gg/apeswap"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -548,12 +548,12 @@ it("renders correctly", () => {
</div>
</div>
<div
class="sc-bZSRNg dGSBjK"
class="sc-iBaQBe eWDVUC"
>
body
</div>
<div
class="sc-bdfBQB sc-iUuxjF fhltBt cHGZjq"
class="sc-bdfBQB sc-eggMyH fhltBt dMySsi"
role="presentation"
/>
</div>
Expand Down Expand Up @@ -672,13 +672,13 @@ it("renders correctly", () => {
</div>
</div>
<div
class="sc-bqyKOL dxNQRP"
class="sc-hBEYId gmCgJa"
>
<div
class="sc-dQoVA kednvs"
class="sc-kstqJO dLrQOZ"
>
<div
class="sc-dIUeWJ cdJgrC"
class="sc-dmlqKv fQPQVn"
>
<svg
class="sc-gsTEea fEVstH"
Expand Down Expand Up @@ -813,7 +813,7 @@ it("renders correctly", () => {
class="css-1rzh7ej"
/>
<div
class="sc-hHfuMS jmzyPq"
class="sc-kfzBvY gDkqat"
>
<button
class="css-1ksg6kp-ThemeSwitcher"
Expand Down Expand Up @@ -923,10 +923,10 @@ it("renders correctly", () => {
</div>
</div>
<div
class="sc-fFucqa ggGFbH"
class="sc-idOiZg knZyJz"
>
<a
class="sc-dmlqKv hsLGOY"
class="sc-fKFxtB fiwbGU"
href="https://twitter.com/ape_swap"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -952,7 +952,7 @@ it("renders correctly", () => {
</svg>
</a>
<a
class="sc-dmlqKv hsLGOY"
class="sc-fKFxtB fiwbGU"
href="https://discord.gg/apeswap"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -994,7 +994,7 @@ it("renders correctly", () => {
</svg>
</a>
<a
class="sc-dmlqKv hsLGOY"
class="sc-fKFxtB fiwbGU"
href="https://t.me/ape_swap"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -1020,7 +1020,7 @@ it("renders correctly", () => {
</svg>
</a>
<a
class="sc-dmlqKv hsLGOY"
class="sc-fKFxtB fiwbGU"
href="https://www.reddit.com/r/Apeswap/"
rel="noopener noreferrer"
target="_blank"
Expand All @@ -1046,7 +1046,7 @@ it("renders correctly", () => {
</svg>
</a>
<a
class="sc-dmlqKv hsLGOY"
class="sc-fKFxtB fiwbGU"
href="https://ape-swap.medium.com/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -1080,7 +1080,7 @@ it("renders correctly", () => {
</svg>
</a>
<a
class="sc-dmlqKv hsLGOY"
class="sc-fKFxtB fiwbGU"
href="https://www.instagram.com/apeswap.finance/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -1115,13 +1115,13 @@ it("renders correctly", () => {
</a>
</div>
<div
class="sc-kfzBvY iRPvkB"
class="sc-bBXrwG boUgcl"
>
<div
style="margin-right: 21px;"
>
<a
class="sc-kstqJO hxIPNw"
class="sc-fodVek jVnpHB"
href="https://info.apeswap.finance/token/0x603c7f932ed1fc6575303d8fb018fdcbb0f39a95"
target="_blank"
>
Expand Down Expand Up @@ -1203,7 +1203,7 @@ it("renders correctly", () => {
class="css-e2mh0b-MobileLinks"
>
<div
class="sc-bBXrwG itjZDJ"
class="sc-cxFLGX kIdQXp"
>
<span
class="css-1k1lj3q-MobileLinkMenu"
Expand All @@ -1223,7 +1223,7 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-bBXrwG itjZDJ"
class="sc-cxFLGX kIdQXp"
>
<span
class="css-1k1lj3q-MobileLinkMenu"
Expand All @@ -1243,7 +1243,7 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-bBXrwG eDXltO"
class="sc-cxFLGX iiQhjC"
>
<span
class="css-1k1lj3q-MobileLinkMenu"
Expand All @@ -1265,7 +1265,7 @@ it("renders correctly", () => {
</div>
</div>
<svg
class="sc-gsTEea fQWPxo sc-fodVek gXLOmE"
class="sc-gsTEea fQWPxo sc-bkzYnD gnbGR"
color="text"
viewBox="0 0 425 398"
width="20px"
Expand Down
31 changes: 31 additions & 0 deletions src/components/Tag/LpTag.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from "react";
import styled from "styled-components";
import { StyledLpTag, StyledLpText } from "./styles";

export enum LpTypeVariants {
APE = "ape",
UNI = "uni",
}

export interface LpTagProps {
variant: LpTypeVariants;
}

const LpTag: React.FC<LpTagProps> = ({ 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 (
<StyledLpTag background={bgColor[variant]} {...props}>
<StyledLpText background={textColor[variant]}>{variant} LP</StyledLpText>
</StyledLpTag>
);
};

export default LpTag;
2 changes: 1 addition & 1 deletion src/components/Tag/Tag.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { TagProps } from "./types";
import { StyledTag } from "./StyledTag";
import { StyledTag } from "./styles";

const Tag: React.FC<TagProps> = ({ startIcon, endIcon, children, ...props }) => (
<StyledTag {...props}>
Expand Down
Loading

0 comments on commit bded2f0

Please sign in to comment.