chore: Moved colors to theme folder

ApeSwapFinance · Dec 6, 2022 · 473241a · 473241a
1 parent 8a6c55f
commit 473241a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 21 deletions.
diff --git a/src/components/Tag/LpTag.tsx b/src/components/Tag/LpTag.tsx
@@ -9,24 +9,13 @@ export interface LpTagProps {
 
 const LpTag: React.FC<LpTagProps> = ({ 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 (
-    <StyledLpTag background={bgColor[variant]} {...props}>
+    <StyledLpTag variant={variant} {...props}>
       {isDark ? (
-        <DarkText background={textColor[variant]}>{variant} LP</DarkText>
+        <DarkText variant={variant}>{variant} LP</DarkText>
       ) : (
-        <LightText background={textColor[variant]}>{variant} LP</LightText>
+        <LightText variant={variant}>{variant} LP</LightText>
       )}
     </StyledLpTag>
   );

diff --git 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<ThemedProps>`
   }
 `;
 
-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
@@ -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
@@ -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;
+};