v.6.2.0

Kwenta · Mar 2, 2023 · dbac62e · dbac62e
2 parents 4efb8ca + 8007b7b
commit dbac62e
Show file tree

Hide file tree

Showing 145 changed files with 3,858 additions and 3,299 deletions.
diff --git a/components/Badge/Badge.tsx b/components/Badge/Badge.tsx
@@ -1,21 +1,44 @@
-import styled from 'styled-components';
+import { FC } from 'react';
+import styled, { css } from 'styled-components';
 
-const Badge = styled.span<{ color: 'yellow' | 'red' | 'gray' }>`
+type BadgeProps = {
+	color?: 'yellow' | 'red' | 'gray';
+	size?: 'small' | 'regular';
+	dark?: boolean;
+};
+
+const Badge: FC<BadgeProps> = ({ color = 'yellow', size = 'regular', dark, ...props }) => {
+	return <BaseBadge $color={color} $dark={dark} $size={size} {...props} />;
+};
+
+const BaseBadge = styled.span<{
+	$color: 'yellow' | 'red' | 'gray';
+	$dark?: boolean;
+	$size: 'small' | 'regular';
+}>`
 	text-transform: uppercase;
-	padding: 1.6px 3px 1px 3px;
 	text-align: center;
-	font-family: ${(props) => props.theme.fonts.black};
-	color: ${(props) => props.theme.colors.selectedTheme.badge[props.color].text};
-	background: ${(props) => props.theme.colors.selectedTheme.badge[props.color].background};
+	${(props) => css`
+		padding: 2px 6px;
+		padding: ${props.$size === 'small' ? '2px 4px' : '2px 6px'};
+		font-size: ${props.$size === 'small' ? 10 : 12}px;
+		font-family: ${props.theme.fonts.black};
+		color: ${props.theme.colors.selectedTheme.newTheme.badge[props.$color].text};
+		background: ${props.theme.colors.selectedTheme.newTheme.badge[props.$color].background};
+		${props.$dark &&
+		css`
+			color: ${props.theme.colors.selectedTheme.newTheme.badge[props.$color].dark.text};
+			background: ${props.theme.colors.selectedTheme.newTheme.badge[props.$color].dark.background};
+			border: 1px solid ${props.theme.colors.selectedTheme.newTheme.badge[props.$color].dark.border};
+		`}
+	`}
 	border-radius: 100px;
-	margin-left: 5px;
 	line-height: unset;
-	font-size: 10px;
 	font-variant: all-small-caps;
 	opacity: 1;
 	user-select: none;
+	display: flex;
+	align-items: center;
 `;
 
-Badge.displayName = 'Badge';
-
 export default Badge;
diff --git a/components/Badge/MarketBadge.tsx b/components/Badge/MarketBadge.tsx
@@ -13,7 +13,7 @@ import Badge from './Badge';
 type MarketBadgeProps = {
 	currencyKey: FuturesMarketAsset | null;
 	isFuturesMarketClosed: boolean;
-	futuresClosureReason: FuturesClosureReason;
+	futuresClosureReason?: FuturesClosureReason;
 };
 
 type TransitionBadgeProps = {

diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -1,5 +1,8 @@
+import { FC, ReactNode, memo } from 'react';
 import styled, { css } from 'styled-components';
 
+import { ButtonLoader } from 'components/Loader/Loader';
+
 // TODO: Clean up these styles
 export type ButtonVariant =
 	| 'primary'
@@ -12,16 +15,17 @@ export type ButtonVariant =
 	| 'select'
 	| 'yellow';
 
-type ButtonProps = {
-	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	variant?: ButtonVariant;
+type BaseButtonProps = {
+	$size: 'small' | 'medium' | 'large';
+	$variant: ButtonVariant;
 	isActive?: boolean;
 	isRounded?: boolean;
-	mono?: boolean;
 	fullWidth?: boolean;
 	noOutline?: boolean;
 	textColor?: 'yellow';
 	textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase';
+	$active?: boolean;
+	$mono?: boolean;
 };
 
 export const border = css`
@@ -47,125 +51,106 @@ export const border = css`
 	}
 `;
 
-const Button = styled.button<ButtonProps>`
+const sizeMap = {
+	small: {
+		paddingVertical: 8,
+		paddingHorizontal: 16,
+		height: 40,
+		fontSize: 13,
+	},
+	medium: {
+		paddingVertical: 14,
+		paddingHorizontal: 26,
+		height: 47,
+		fontSize: 15,
+	},
+	large: {
+		paddingVertical: 16,
+		paddingHorizontal: 36,
+		height: 55,
+		fontSize: 16,
+	},
+} as const;
+
+const BaseButton = styled.button<BaseButtonProps>`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
 	height: auto;
 	cursor: pointer;
 	position: relative;
 	border-radius: ${(props) => (props.isRounded ? '50px' : '8px')};
-	padding: 0 14px;
 	box-sizing: border-box;
-	text-transform: ${(props) => props.textTransform || 'capitalize'};
+	text-transform: ${(props) => props.textTransform ?? 'capitalize'};
 	outline: none;
 	white-space: nowrap;
-	font-size: 17px;
-	color: ${(props) =>
-		(props.textColor && props.theme.colors.selectedTheme.button.text[props.textColor]) ||
-		props.theme.colors.selectedTheme.button.text.primary};
+	color: ${(props) => props.theme.colors.selectedTheme.button.text[props.textColor ?? 'primary']};
 	transition: all 0.1s ease-in-out;
 	${border}
 	&:hover {
 		background: ${(props) => props.theme.colors.selectedTheme.button.hover};
 	}
 
 	${(props) =>
-		props.variant === 'primary' &&
+		props.$variant === 'primary' &&
 		css`
 			background: ${props.theme.colors.selectedTheme.button.primary.background};
 			text-shadow: ${props.theme.colors.selectedTheme.button.primary.textShadow};
 			&:hover {
 				background: ${props.theme.colors.selectedTheme.button.primary.hover};
 			}
-		`};
+		`}
 
 	${(props) =>
-		(props.noOutline || props.variant === 'flat') &&
+		(props.noOutline || props.$variant === 'flat') &&
 		css`
-			background: ${(props) => props.theme.colors.selectedTheme.button.fill};
-			border: ${(props) => props.theme.colors.selectedTheme.border};
+			background: ${props.theme.colors.selectedTheme.button.fill};
+			border: ${props.theme.colors.selectedTheme.border};
 			box-shadow: none;
 			&:hover {
-				background: ${(props) => props.theme.colors.selectedTheme.button.fillHover};
+				background: ${props.theme.colors.selectedTheme.button.fillHover};
 			}
 			&::before {
 				display: none;
 			}
-		`};
+		`}
 
 	${(props) =>
-		props.variant === 'yellow' &&
+		props.$variant === 'yellow' &&
 		css`
-			background: ${(props) => props.theme.colors.selectedTheme.button.yellow.fill};
-			border: 1px solid ${(props) => props.theme.colors.selectedTheme.button.yellow.border};
-			color: ${(props) => props.theme.colors.selectedTheme.button.yellow.text};
+			background: ${props.theme.colors.selectedTheme.button.yellow.fill};
+			border: 1px solid ${props.theme.colors.selectedTheme.button.yellow.border};
+			color: ${props.theme.colors.selectedTheme.button.yellow.text};
 
 			box-shadow: none;
 			&:hover {
-				background: ${(props) => props.theme.colors.selectedTheme.button.yellow.fillHover};
+				background: ${props.theme.colors.selectedTheme.button.yellow.fillHover};
 			}
 			&::before {
 				display: none;
 			}
-		`};
+		`}
 
-	${(props) =>
-		props.mono
-			? css`
-					font-family: ${props.theme.fonts.mono};
-			  `
-			: css`
-					font-family: ${props.theme.fonts.bold};
-			  `};
+	font-family: ${(props) => props.theme.fonts[props.$mono ? 'mono' : 'bold']};
 
 	${(props) =>
-		props.variant === 'secondary' &&
+		props.$variant === 'secondary' &&
 		css`
 			color: ${props.theme.colors.selectedTheme.button.secondary.text};
-		`};
+		`}
 
 	${(props) =>
-		props.variant === 'danger' &&
+		props.$variant === 'danger' &&
 		css`
 			color: ${props.theme.colors.selectedTheme.red};
-		`};
-
-	${(props) =>
-		props.size === 'xs' &&
-		css`
-			height: 22px;
-			min-width: 50px;
-			font-size: 11px;
-		`};
-
-	${(props) =>
-		props.size === 'sm' &&
-		css`
-			height: 41px;
-			min-width: 157px;
-			font-size: 15px;
-		`};
-
-	${(props) =>
-		props.size === 'md' &&
-		css`
-			height: 50px;
-			min-width: 200px;
-		`};
+		`}
 
-	${(props) =>
-		props.size === 'lg' &&
-		css`
-			height: 70px;
-			min-width: 260px;
-			font-size: 19px;
-		`};
-
-	${(props) =>
-		props.size === 'xl' &&
-		css`
-			height: 80px;
-			min-width: 360px;
-			font-size: 21px;
-		`};
+	${(props) => css`
+		height: ${sizeMap[props.$size].height}px;
+		padding: ${sizeMap[props.$size].paddingVertical}px ${sizeMap[props.$size].paddingHorizontal}px;
+		font-size: ${sizeMap[props.$size].fontSize}px;
+	`}
 
 	${(props) =>
 		props.fullWidth &&
@@ -186,4 +171,51 @@ const Button = styled.button<ButtonProps>`
 	}
 `;
 
+type ButtonProps = {
+	loading?: boolean;
+	active?: boolean;
+	mono?: boolean;
+	className?: string;
+	left?: ReactNode;
+	right?: ReactNode;
+	size?: 'small' | 'medium' | 'large';
+	variant?: ButtonVariant;
+	fullWidth?: boolean;
+	noOutline?: boolean;
+	textColor?: 'yellow';
+	textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase';
+	style?: React.CSSProperties;
+	disabled?: boolean;
+	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+	isRounded?: boolean;
+};
+
+const Button: FC<ButtonProps> = memo(
+	({
+		loading,
+		children,
+		mono,
+		left,
+		right,
+		active = true,
+		size = 'medium',
+		variant = 'flat',
+		...props
+	}) => {
+		return (
+			<BaseButton $active={active} $mono={mono} $size={size} $variant={variant} {...props}>
+				{loading ? (
+					<ButtonLoader />
+				) : (
+					<>
+						{left}
+						<>{children}</>
+						{right}
+					</>
+				)}
+			</BaseButton>
+		);
+	}
+);
+
 export default Button;