chore: Refactored ListTags

src/components/Tag/ListTag.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { StyledListTag, StyledTagText } from "./styles";
+import { ListTagProps } from "./types";
+
+const ListTag: React.FC<ListTagProps> = ({ variant, ...props }) => {
+  return (
+    <StyledListTag variant={variant} {...props}>
+      <StyledTagText>
+        {variant} {variant === "new" || variant === "hot" ? null : "LP"}
+      </StyledTagText>
+    </StyledListTag>
+  );
+};
+
+export default ListTag;

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 from "./LpTag";
+import { ListTagVariants, listTagVariants, variants } from "./types";
+import ListTag from "./ListTag";
 
 const Row = styled.div`
   display: flex;
@@ -39,9 +39,9 @@ export const Default: React.FC = () => {
         ))}
       </Row>
       <Row>
-        <LpTag variant="ape" />
-        <LpTag variant="uni" />
-        <LpTag variant="ark" />
+        {Object.values(listTagVariants).map((variant: ListTagVariants) => {
+          return <ListTag variant={variant} />;
+        })}
       </Row>
     </>
   );

src/components/Tag/index.tsx

@@ -1,4 +1,4 @@
 export { default as Tag } from "./Tag";
-export { default as LpTag } from "./LpTag";
+export { default as ListTag } from "./ListTag";
 export type { TagProps, Variants as TagVariants } from "./types";
-export type { LpTagVariants } from "./types";
+export type { ListTagVariants } from "./types";

src/components/Tag/styles.tsx

@@ -1,6 +1,6 @@
 import styled, { DefaultTheme } from "styled-components";
 import getColor from "../../util/getColor";
-import { LpTagProps, TagProps } from "./types";
+import { ListTagProps, TagProps } from "./types";
 
 interface ThemedProps extends TagProps {
   theme: DefaultTheme;
@@ -29,20 +29,20 @@ export const StyledTag = styled.div<ThemedProps>`
   }
 `;
 
-interface CustomProps extends LpTagProps {
+interface CustomProps extends ListTagProps {
   theme: DefaultTheme;
 }
 
-export const StyledLpTag = styled.div<CustomProps>`
+export const StyledListTag = styled.div<CustomProps>`
   align-items: center;
-  background: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagBg?.[variant]};
-  border-radius: 6px;
+  background: ${({ theme, variant = "ape" }) => theme?.colors?.listTagBg?.[variant]};
+  border-radius: 16px;
   display: inline-flex;
   height: 15px;
   padding: 0 5px;
 `;
 
-export const StyledLPText = styled.div<{ theme: DefaultTheme }>`
+export const StyledTagText = styled.div<{ theme: DefaultTheme }>`
   color: ${({ theme }) => theme?.colors?.primaryBright};
   text-transform: uppercase;
   font-size: 10px;

src/components/Tag/types.ts

@@ -20,14 +20,16 @@ export interface TagProps extends SpaceProps {
   outline?: boolean;
 }
 
-export const lpTagVariants = {
+export const listTagVariants = {
   APE: "ape",
   UNI: "uni",
   ARK: "ark",
+  NEW: "new",
+  HOT: "hot",
 } as const;
 
-export type LpTagVariants = typeof lpTagVariants[keyof typeof lpTagVariants];
+export type ListTagVariants = typeof listTagVariants[keyof typeof listTagVariants];
 
-export interface LpTagProps extends SpaceProps {
-  variant: LpTagVariants;
+export interface ListTagProps extends SpaceProps {
+  variant: ListTagVariants;
 }

src/theme/colors.ts

@@ -13,10 +13,12 @@ export const baseColors = {
   inputBorder: "#E6DECB",
   brown: "#A16552",
   smartGradient: "linear-gradient(94.44deg, #BA801E -9.73%, #E7CF67 40.14%, #BA801E 93.01%)",
-  lpTagBg: {
+  listTagBg: {
     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)",
+    hot: "#DF4141",
+    new: "#38A611",
   },
 };
 

src/theme/types.ts

@@ -61,7 +61,7 @@ export type Colors = {
   smartGradient: string;
   yellowHover: string;
   input: string;
-  lpTagBg: LpTagColors;
+  listTagBg: ListTagColors;
 
   // Gradients
   gradients?: Gradients;
@@ -79,8 +79,10 @@ export type FontFamily = {
   poppins: string;
 };
 
-export type LpTagColors = {
+export type ListTagColors = {
   ape: string;
   uni: string;
   ark: string;
+  hot: string;
+  new: string;
 };