chore: Add new lptype tag

ApeSwapFinance · Dec 14, 2022 · f44faf7 · f44faf7
1 parent b3af036
commit f44faf7
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 35 deletions.
diff --git 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<LpTagProps> = ({ variant, ...props }) => {
-  const { isDark } = useTheme();
-
   return (
     <StyledLpTag variant={variant} {...props}>
-      {isDark ? (
-        <DarkText variant={variant}>{variant} LP</DarkText>
-      ) : (
-        <LightText variant={variant}>{variant} LP</LightText>
-      )}
+      <StyledLPText>{variant} LP</StyledLPText>
     </StyledLpTag>
   );
 };

diff --git a/src/components/Tag/styles.tsx b/src/components/Tag/styles.tsx
@@ -42,20 +42,10 @@ export const StyledLpTag = styled.div<CustomProps>`
   padding: 0 5px;
 `;
 
-export const LightText = styled.div<CustomProps>`
-  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<CustomProps>`
-  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
@@ -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
@@ -62,7 +62,6 @@ export type Colors = {
   yellowHover: string;
   input: string;
   lpTagBg: LpTagColors;
-  lpTagText: LpTagColors;
 
   // Gradients
   gradients?: Gradients;