refactor: use consistent button component (#889)

* refactor: new consistent button component

* remove redundant style

* refactor: use px instead of rem for consistency

src/components/Button/Button.tsx

@@ -0,0 +1,144 @@
+import styled from "@emotion/styled";
+
+import { QUERIESV2, COLORS } from "utils";
+
+type ButtonSize = "lg" | "md" | "sm";
+type ButtonColor = keyof typeof COLORS;
+
+type BaseButtonProps = {
+  size?: ButtonSize;
+};
+
+type PrimaryButtonProps = BaseButtonProps & {
+  backgroundColor?: ButtonColor;
+  textColor?: ButtonColor;
+};
+
+type SecondaryButtonProps = BaseButtonProps & {
+  textColor?: ButtonColor;
+  borderColor?: ButtonColor;
+  hoveredBorderColor?: ButtonColor;
+};
+
+const sizeMap: Record<
+  ButtonSize,
+  {
+    fontSize: string;
+    lineHeight: string;
+    height: string;
+    padding: string;
+    gap: string;
+    borderRadius: string;
+    mobileSize: ButtonSize;
+  }
+> = {
+  lg: {
+    fontSize: "18px",
+    lineHeight: "26px",
+    height: "64px",
+    padding: "0px 40px",
+    gap: "4px",
+    borderRadius: "32px",
+    mobileSize: "md",
+  },
+  md: {
+    fontSize: "16px",
+    lineHeight: "20px",
+    height: "40px",
+    padding: "0px 20px",
+    gap: "6px",
+    borderRadius: "20px",
+    mobileSize: "sm",
+  },
+  sm: {
+    fontSize: "14px",
+    lineHeight: "18px",
+    height: "40px",
+    padding: "0px 16px 1px 16px",
+    gap: "4px",
+    borderRadius: "20px",
+    mobileSize: "sm",
+  },
+};
+
+const BaseButton = styled.button<BaseButtonProps>`
+  // Text styles
+  font-style: normal;
+  font-weight: 500;
+  font-size: ${({ size = "lg" }) => sizeMap[size].fontSize};
+  line-height: ${({ size = "lg" }) => sizeMap[size].lineHeight};
+
+  // Box styles
+  height: ${({ size = "lg" }) => sizeMap[size].height};
+  padding: ${({ size = "lg" }) => sizeMap[size].padding};
+  gap: ${({ size = "lg" }) => sizeMap[size].gap};
+  border-radius: ${({ size = "lg" }) => sizeMap[size].borderRadius};
+
+  background-color: transparent;
+
+  &:hover:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  @media ${QUERIESV2.sm.andDown} {
+    // Text styles
+    font-size: ${({ size = "lg" }) =>
+      sizeMap[sizeMap[size].mobileSize].fontSize};
+    line-height: ${({ size = "lg" }) =>
+      sizeMap[sizeMap[size].mobileSize].lineHeight};
+
+    // Box styles
+    height: ${({ size = "lg" }) => sizeMap[sizeMap[size].mobileSize].height};
+    padding: ${({ size = "lg" }) => sizeMap[sizeMap[size].mobileSize].padding};
+    gap: ${({ size = "lg" }) => sizeMap[sizeMap[size].mobileSize].gap};
+    border-radius: ${({ size = "lg" }) =>
+      sizeMap[sizeMap[size].mobileSize].borderRadius};
+  }
+`;
+
+export const UnstyledButton = styled(BaseButton)`
+  border: none;
+  padding: 0;
+  height: auto;
+
+  @media ${QUERIESV2.sm.andDown} {
+    padding: 0;
+  }
+`;
+
+export const PrimaryButton = styled(BaseButton)<PrimaryButtonProps>`
+  color: ${({ textColor = "black-800" }) => COLORS[textColor]};
+  border: none;
+  background-color: ${({ backgroundColor = "aqua" }) =>
+    COLORS[backgroundColor]};
+
+  &:hover:not(:disabled) {
+    opacity: 0.75;
+    transition: opacity 100ms ease-out;
+  }
+
+  &:disabled {
+    opacity: 0.25;
+  }
+`;
+
+export const SecondaryButton = styled(BaseButton)<SecondaryButtonProps>`
+  color: ${({ borderColor = "aqua", textColor }) =>
+    COLORS[textColor || borderColor]};
+  border: 1px solid;
+  border-color: ${({ borderColor = "aqua" }) => COLORS[borderColor]};
+
+  &:hover:not(:disabled) {
+    border-color: ${({ hoveredBorderColor, borderColor = "aqua" }) =>
+      COLORS[hoveredBorderColor || borderColor]};
+    transition: border-color 100ms ease-out;
+  }
+
+  &:disabled {
+    opacity: 0.25;
+  }
+`;

src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

src/components/CopyReferralLink/CopyReferralLink.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { ButtonV2 } from "components/Buttons";
+import { UnstyledButton } from "components/Button";
 import { useReferralLink } from "hooks/useReferralLink";
 import { ReactComponent as UnstyledCopyIcon } from "assets/icons/copy-16.svg";
 import { useEffect, useState } from "react";
@@ -76,7 +76,7 @@ const LinkText = styled(Text)`
   width: fit-content;
 `;
 
-const CopyReferralButton = styled(ButtonV2)`
+const CopyReferralButton = styled(UnstyledButton)`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -90,10 +90,6 @@ const CopyReferralButton = styled(ButtonV2)`
   color: #e0f3ff;
 
   background: transparent;
-
-  &:active::after {
-    border: none !important;
-  }
 `;
 
 // Note:  React was having an error hear related

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import Footer from "components/Footer";
 import { Text } from "components/Text";
-import { TertiaryButton } from "components/Buttons";
+import { SecondaryButton } from "components/Button";
 import Sentry from "utils/sentry";
 
 import { Wrapper, InnerWrapper, ButtonsWrapper } from "./ErrorBoundary.styles";
@@ -25,15 +25,15 @@ export function FallbackComponent(props: { error: Error }) {
           come back later.
         </Text>
         <ButtonsWrapper>
-          <TertiaryButton size="sm" onClick={() => window.location.reload()}>
+          <SecondaryButton size="sm" onClick={() => window.location.reload()}>
             Reload
-          </TertiaryButton>
-          <TertiaryButton
+          </SecondaryButton>
+          <SecondaryButton
             size="sm"
             onClick={() => window.open("https://discord.across.to", "_blank")}
           >
             Discord
-          </TertiaryButton>
+          </SecondaryButton>
         </ButtonsWrapper>
       </InnerWrapper>
       <Footer />

src/components/InputWithMaxButton/InputWithMaxButton.styles.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
+import { UnstyledButton } from "components/Button";
 import { QUERIESV2 } from "utils";
-import { SecondaryButtonWithoutShadow as UnstyledButton } from "components/Buttons";
 
 interface IInput {
   valid: boolean;

src/components/Pagination/Pagination.styles.tsx

@@ -1,6 +1,6 @@
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
-import { BaseButton } from "components/Buttons";
+import { UnstyledButton } from "components/Button";
 import { QUERIESV2 } from "utils";
 import { ReactComponent as ArrowIcon } from "assets/icons/arrow-16.svg";
 
@@ -24,7 +24,7 @@ export const PageSizeSelectWrapper = styled.div`
   }
 `;
 
-export const PageSizeSelectButton = styled(BaseButton)`
+export const PageSizeSelectButton = styled(UnstyledButton)`
   padding: 10px 20px;
   display: flex;
   align-items: center;
@@ -67,7 +67,7 @@ export const PageSizeSelectDropdown = styled.div`
   background-color: var(--color-gray);
 `;
 
-export const PageSizeOptiontButton = styled(BaseButton)`
+export const PageSizeOptiontButton = styled(UnstyledButton)`
   padding: 6px 20px;
   display: flex;
   align-items: center;