Skip to content

Commit

Permalink
chore: Added lptype tag for dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@ape-fede
ape-fede committed Dec 5, 2022
1 parent 6ae0473 commit 8a6c55f
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 63 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-citxvW iRpojR"
class="sc-jcVcSv iFIlhf"
>
<nav
class="sc-bZSRNg fYLsjM"
class="sc-iUuxjF drpIUF"
>
<div
class="css-4cffwv"
Expand Down Expand Up @@ -200,38 +200,38 @@ it("renders correctly", () => {
</div>
</nav>
<div
class="sc-iUuxjF jtvsWi"
class="sc-iBaQBe idhelT"
>
<div
class="sc-hiSbEG jRExDC"
class="sc-gWHigU fKCtSb"
>
<div
class="sc-giImIA hxJRXv"
class="sc-ezredP hVSuvJ"
role="button"
>
<a
href="/swap"
target="_self"
>
<div
class="sc-iJuVqt iTOioi"
class="sc-giImIA bUFezZ"
>
Exchange
</div>
</a>
</div>
<div
class="sc-bYEvvW jlsOQN"
class="sc-kLgnNl khAKMs"
>
<div
class="sc-giImIA hxJRXv"
class="sc-ezredP hVSuvJ"
role="button"
>
<div
class="sc-iktFfs cDLrHU"
class="sc-jJEKmz eNAolY"
>
<div
class="sc-iJuVqt iTOioi"
class="sc-giImIA bUFezZ"
>
Stake
</div>
Expand All @@ -249,21 +249,21 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-kLgnNl btEQLW"
class="sc-iktFfs lgOqlH"
/>
</div>
<div
class="sc-bYEvvW jlsOQN"
class="sc-kLgnNl khAKMs"
>
<div
class="sc-giImIA hxJRXv"
class="sc-ezredP hVSuvJ"
role="button"
>
<div
class="sc-iktFfs cDLrHU"
class="sc-jJEKmz eNAolY"
>
<div
class="sc-iJuVqt iTOioi"
class="sc-giImIA bUFezZ"
>
Raise
</div>
Expand All @@ -281,21 +281,21 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-kLgnNl btEQLW"
class="sc-iktFfs lgOqlH"
/>
</div>
<div
class="sc-bYEvvW jlsOQN"
class="sc-kLgnNl khAKMs"
>
<div
class="sc-giImIA hxJRXv"
class="sc-ezredP hVSuvJ"
role="button"
>
<div
class="sc-iktFfs cDLrHU"
class="sc-jJEKmz eNAolY"
>
<div
class="sc-iJuVqt iTOioi"
class="sc-giImIA bUFezZ"
>
Collect
</div>
Expand All @@ -313,36 +313,36 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-kLgnNl btEQLW"
class="sc-iktFfs lgOqlH"
/>
</div>
<div
class="sc-giImIA hxJRXv"
class="sc-ezredP hVSuvJ"
role="button"
>
<a
href="https://app.ola.finance/apeswap/markets"
target="_blank"
>
<div
class="sc-iJuVqt iTOioi"
class="sc-giImIA bUFezZ"
>
Lend
</div>
</a>
</div>
<div
class="sc-bYEvvW jlsOQN"
class="sc-kLgnNl khAKMs"
>
<div
class="sc-giImIA hxJRXv"
class="sc-ezredP hVSuvJ"
role="button"
>
<div
class="sc-iktFfs cDLrHU"
class="sc-jJEKmz eNAolY"
>
<div
class="sc-iJuVqt iTOioi"
class="sc-giImIA bUFezZ"
>
Explore
</div>
Expand All @@ -360,7 +360,7 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-kLgnNl btEQLW"
class="sc-iktFfs lgOqlH"
/>
</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-jJEKmz dMlzxM"
class="sc-hiSbEG gqZtKj"
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-jJEKmz dMlzxM"
class="sc-hiSbEG gqZtKj"
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-jJEKmz dMlzxM"
class="sc-hiSbEG gqZtKj"
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-iBaQBe eWDVUC"
class="sc-eggMyH dwaMaH"
>
body
</div>
<div
class="sc-bdfBQB sc-eggMyH fhltBt dMySsi"
class="sc-bdfBQB sc-cTkxnA fhltBt WiFmI"
role="presentation"
/>
</div>
Expand Down Expand Up @@ -672,13 +672,13 @@ it("renders correctly", () => {
</div>
</div>
<div
class="sc-hBEYId gmCgJa"
class="sc-fodVek thHgQ"
>
<div
class="sc-kstqJO dLrQOZ"
class="sc-hBEYId gzPWTm"
>
<div
class="sc-dmlqKv fQPQVn"
class="sc-kfzBvY bFzGOQ"
>
<svg
class="sc-gsTEea fEVstH"
Expand Down Expand Up @@ -813,7 +813,7 @@ it("renders correctly", () => {
class="css-1rzh7ej"
/>
<div
class="sc-kfzBvY gDkqat"
class="sc-fKFxtB eigPKS"
>
<button
class="css-1ksg6kp-ThemeSwitcher"
Expand Down Expand Up @@ -923,10 +923,10 @@ it("renders correctly", () => {
</div>
</div>
<div
class="sc-idOiZg knZyJz"
class="sc-dIUeWJ hBIdQR"
>
<a
class="sc-fKFxtB fiwbGU"
class="sc-bBXrwG kqTzrD"
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-fKFxtB fiwbGU"
class="sc-bBXrwG kqTzrD"
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-fKFxtB fiwbGU"
class="sc-bBXrwG kqTzrD"
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-fKFxtB fiwbGU"
class="sc-bBXrwG kqTzrD"
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-fKFxtB fiwbGU"
class="sc-bBXrwG kqTzrD"
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-fKFxtB fiwbGU"
class="sc-bBXrwG kqTzrD"
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-bBXrwG boUgcl"
class="sc-iwyWTf qdCXx"
>
<div
style="margin-right: 21px;"
>
<a
class="sc-fodVek jVnpHB"
class="sc-fFucqa bjYQlW"
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-cxFLGX kIdQXp"
class="sc-lmoMya efZEWw"
>
<span
class="css-1k1lj3q-MobileLinkMenu"
Expand All @@ -1223,7 +1223,7 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-cxFLGX kIdQXp"
class="sc-lmoMya efZEWw"
>
<span
class="css-1k1lj3q-MobileLinkMenu"
Expand All @@ -1243,7 +1243,7 @@ it("renders correctly", () => {
</svg>
</div>
<div
class="sc-cxFLGX iiQhjC"
class="sc-lmoMya kKdfjX"
>
<span
class="css-1k1lj3q-MobileLinkMenu"
Expand All @@ -1265,7 +1265,7 @@ it("renders correctly", () => {
</div>
</div>
<svg
class="sc-gsTEea fQWPxo sc-bkzYnD gnbGR"
class="sc-gsTEea fQWPxo sc-idOiZg hysgHz"
color="text"
viewBox="0 0 425 398"
width="20px"
Expand Down
21 changes: 15 additions & 6 deletions src/components/Tag/LpTag.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
import React from "react";
import { StyledLpTag, StyledLpText } from "./styles";
import { useTheme } from "styled-components";
import { StyledLpTag, LightText, DarkText } from "./styles";
import { LpTypeVariants } from "./types";

export interface LpTagProps {
variant: LpTypeVariants;
}

const LpTag: React.FC<LpTagProps> = ({ 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 (
<StyledLpTag background={bgColor[variant]} {...props}>
<StyledLpText background={textColor[variant]}>{variant} LP</StyledLpText>
{isDark ? (
<DarkText background={textColor[variant]}>{variant} LP</DarkText>
) : (
<LightText background={textColor[variant]}>{variant} LP</LightText>
)}
</StyledLpTag>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/components/Tag/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 8a6c55f

Please sign in to comment.