valitydev/vality.dev
14
0
Fork 0
mirror of https://github.com/valitydev/vality.dev.git synced 2024-11-06 00:55:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

OPS-249: Add text color for buttons (#15)

Browse Source
This commit is contained in:
Rinat Arsaev 2023-02-02 15:03:12 +06:00 committed by GitHub
parent 7dd9eb2c3d
commit 98964ee777
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Button.tsx
View File

@ -16,6 +16,7 @@ interface Props extends React.ComponentProps<typeof ButtonUnstyled> {
size?: "small" | "medium" | "large"; size?: "small" | "medium" | "large";
svgColoredParams?: SvgColoredParam[]; svgColoredParams?: SvgColoredParam[];
disabled?: boolean; disabled?: boolean;
textColor?: string;
} }
function getColoredSvgCss(params: SvgColoredParam[] = [], color: string) { function getColoredSvgCss(params: SvgColoredParam[] = [], color: string) {
@ -28,7 +29,7 @@ const StyledButton = styled(ButtonUnstyled)<{
({ ({
theme, theme,
color, color,
styled: { variant, size, svgColoredParams, hasText, disabled }, styled: { variant, size, svgColoredParams, hasText, disabled, textColor },
}) => { }) => {
const buttonSizes = { const buttonSizes = {
large: 6, large: 6,
@ -51,7 +52,7 @@ const StyledButton = styled(ButtonUnstyled)<{
if (disabled) { if (disabled) {
iconColor = theme?.palette?.grey?.[500]; iconColor = theme?.palette?.grey?.[500];
} else { } else {
if (!hasText && variant === "contained") if (textColor)
hoverIconColor = hoverIconColor =
activeIconColor = activeIconColor =
iconColor = iconColor =
@ -167,6 +168,7 @@ export const Button: React.FC<Props> = ({
size, size,
svgColoredParams, svgColoredParams,
disabled, disabled,
textColor,
...props ...props
}) => { }) => {
const { navigate } = useI18next(); const { navigate } = useI18next();
@ -187,6 +189,7 @@ export const Button: React.FC<Props> = ({
svgColoredParams: svgColoredParams || ["fill"], svgColoredParams: svgColoredParams || ["fill"],
hasText: !!children, hasText: !!children,
disabled: !!disabled, disabled: !!disabled,
textColor,
}} }}
> >
<Stack <Stack

3
src/components/Carousel.tsx
View File

@ -109,6 +109,7 @@ export const Carousel: React.FC<Props> = ({ images, width }) => {
}} }}
endIcon={<Repeat />} endIcon={<Repeat />}
size="large" size="large"
textColor="primary"
/> />
)} )}
</Box> </Box>
@ -122,6 +123,7 @@ export const Carousel: React.FC<Props> = ({ images, width }) => {
}} }}
endIcon={<ArrowLeft />} endIcon={<ArrowLeft />}
size="large" size="large"
textColor="primary"
/> />
)} )}
<Button <Button
@ -133,6 +135,7 @@ export const Carousel: React.FC<Props> = ({ images, width }) => {
endIcon={<ArrowRight />} endIcon={<ArrowRight />}
size="large" size="large"
disabled={!(active > -images.length + 1)} disabled={!(active > -images.length + 1)}
textColor="primary"
/> />
</Stack> </Stack>
</Stack> </Stack>