89f914ebf8
This is a small PR to improve the design of our CSV import. I noticed the back button that was implemented in a recent PR #5625 was broken and would need to be fixed (e.g. try to come back to the very first upload step from the sheet selection step). cc @shashankvish0010 if you want to give a stab at fixing your PR that'd be amazing, thanks!
126 lines
3.0 KiB
TypeScript
126 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { IconComponent } from 'twenty-ui';
|
|
|
|
export type MainButtonVariant = 'primary' | 'secondary';
|
|
|
|
type Props = {
|
|
title: string;
|
|
fullWidth?: boolean;
|
|
width?: number;
|
|
variant?: MainButtonVariant;
|
|
soon?: boolean;
|
|
} & React.ComponentProps<'button'>;
|
|
|
|
const StyledButton = styled.button<
|
|
Pick<Props, 'fullWidth' | 'width' | 'variant'>
|
|
>`
|
|
align-items: center;
|
|
background: ${({ theme, variant, disabled }) => {
|
|
if (disabled === true) {
|
|
return theme.background.secondary;
|
|
}
|
|
|
|
switch (variant) {
|
|
case 'primary':
|
|
return theme.background.primaryInverted;
|
|
case 'secondary':
|
|
return theme.background.primary;
|
|
default:
|
|
return theme.background.primary;
|
|
}
|
|
}};
|
|
border: 1px solid;
|
|
border-color: ${({ theme, disabled, variant }) => {
|
|
if (disabled === true) {
|
|
return theme.background.transparent.lighter;
|
|
}
|
|
|
|
switch (variant) {
|
|
case 'primary':
|
|
return theme.background.transparent.strong;
|
|
case 'secondary':
|
|
return theme.border.color.medium;
|
|
default:
|
|
return theme.background.primary;
|
|
}
|
|
}};
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
${({ theme, disabled }) => {
|
|
if (disabled === true) {
|
|
return '';
|
|
}
|
|
|
|
return `box-shadow: ${theme.boxShadow.light};`;
|
|
}}
|
|
color: ${({ theme, variant, disabled }) => {
|
|
if (disabled === true) {
|
|
return theme.font.color.light;
|
|
}
|
|
|
|
switch (variant) {
|
|
case 'primary':
|
|
return theme.font.color.inverted;
|
|
case 'secondary':
|
|
return theme.font.color.primary;
|
|
default:
|
|
return theme.font.color.primary;
|
|
}
|
|
}};
|
|
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
justify-content: center;
|
|
outline: none;
|
|
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
|
|
width: ${({ fullWidth, width }) =>
|
|
fullWidth ? '100%' : width ? `${width}px` : 'auto'};
|
|
${({ theme, variant }) => {
|
|
switch (variant) {
|
|
case 'secondary':
|
|
return `
|
|
&:hover {
|
|
background: ${theme.background.tertiary};
|
|
}
|
|
`;
|
|
default:
|
|
return `
|
|
&:hover {
|
|
background: ${theme.background.primaryInvertedHover}};
|
|
}
|
|
`;
|
|
}
|
|
}};
|
|
`;
|
|
|
|
type MainButtonProps = Props & {
|
|
Icon?: IconComponent;
|
|
};
|
|
|
|
export const MainButton = ({
|
|
Icon,
|
|
title,
|
|
width,
|
|
fullWidth = false,
|
|
variant = 'primary',
|
|
type,
|
|
onClick,
|
|
disabled,
|
|
className,
|
|
}: MainButtonProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<StyledButton
|
|
className={className}
|
|
{...{ disabled, fullWidth, width, onClick, type, variant }}
|
|
>
|
|
{Icon && <Icon size={theme.icon.size.sm} />}
|
|
{title}
|
|
</StyledButton>
|
|
);
|
|
};
|